reactjs - React js 通用布局与 React Router

Question

我正在使用 Ant Design 为我的反应应用程序创建布局。我为 Header、SideBar、FooterComp 创建了单独的组件，并将它们全部包含在 App.js 中。代码如下：

import React from "react";
import { Layout } from "antd";
import "./App.css";

import { NavBar } from "./components/Header";
import { SideBar } from "./components/Sidebar";
import { FooterComp } from "./components/Footer";

const { Content } = Layout;

const App = () => {
  return (
    <Layout>
      <SideBar />
      <Layout className="site-layout">
        <NavBar />
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 487,
          }}
        >
          Content
        </Content>
        <FooterComp />
      </Layout>
    </Layout>
  );
};

export default App;

现在，我想使用 React Router 并在 Content 中渲染组件。我如何做到这一点？此外，我将创建另外两个组件，即用于登录和注册。我不希望这两个组件出现布局。

标签： reactjslayoutreact-routerantd

Answer 1

你的反应路由器（v5）应该是这种格式

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Switch, Redirect } from 'react-router-dom';

import App from './components/App';
import Home from './components/home';

ReactDOM.render(
    <Router >
      <App>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/home" component={Home} />
        </Switch>
      </App>
    </Router>,
  document.querySelector('#root')
);

并且在您的 App 组件中，内容使用 {props.children} 来加载主组件，同样您可以添加多个带有差异组件的路由

import React from "react";
import { Layout } from "antd";
import "./App.css";

import { NavBar } from "./components/Header";
import { SideBar } from "./components/Sidebar";
import { FooterComp } from "./components/Footer";

const { Content } = Layout;

const App = (props) => {
  return (
    <Layout>
      <SideBar />
      <Layout className="site-layout">
        <NavBar />
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 487,
          }}
        >
          {props.children}
        </Content>
        <FooterComp />
      </Layout>
    </Layout>
  );
};

export default App;

默认情况下，此布局将为所有登录用户加载..注册和登录页面..在下面的线程中检查我的答案，检查用户是否经过身份验证，如果没有，则在其他情况下，您可以在没有默认值的情况下加载您的登录和注册组件（应用程序）布局

如何在 React Router 4 中实现经过身份验证的路由？