具有不同页面布局的嵌套react路由

npm install react-router-dom

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

const MainLayout = ({ children }) => (
  <div>
    <header>主要布局</header>
    <nav>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于</Link></li>
      </ul>
    </nav>
    <main>{children}</main>
    <footer>页脚</footer>
  </div>
);

const SecondaryLayout = ({ children }) => (
  <div>
    <header>次要布局</header>
    <nav>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/contact">联系我们</Link></li>
      </ul>
    </nav>
    <main>{children}</main>
    <footer>页脚</footer>
  </div>
);

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" render={() => (
        <MainLayout>
          <Home />
        </MainLayout>
      )} />
      <Route path="/about" render={() => (
        <MainLayout>
          <About />
        </MainLayout>
      )} />
      <Route path="/contact" render={() => (
        <SecondaryLayout>
          <Contact />
        </SecondaryLayout>
      )} />
    </Switch>
  </Router>
);

const Home = () => (
  <div>
    <h1>首页</h1>
    <p>这是主要布局的首页内容。</p>
  </div>
);

const About = () => (
  <div>
    <h1>关于</h1>
    <p>这是主要布局的关于页面内容。</p>
  </div>
);

const Contact = () => (
  <div>
    <h1>联系我们</h1>
    <p>这是次要布局的联系页面内容。</p>
  </div>
);