React js 通用布局与 React Router答案

【问题标题】：React js common layout with React RouterReact js 通用布局与 React Router
【发布时间】：2020-06-28 11:54:00
【问题描述】：

我正在使用 Ant Design 为我的 react 应用程序创建布局。我为 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 中渲染组件。我如何做到这一点？此外，我将创建另外两个组件，即用于登录和注册。我不希望这两个组件出现布局。

【问题讨论】：

标签： reactjs layout react-router antd

【解决方案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} 来加载主组件，同样您可以使用 diff 组件添加多个路由

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;

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

How to implement authenticated routes in React Router 4?

【讨论】：