React路由器v4 -如何动态使用布局

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

const Layout1 = ({ children }) => (
  <div>
    <header>Layout 1 Header</header>
    <main>{children}</main>
    <footer>Layout 1 Footer</footer>
  </div>
);

const Layout2 = ({ children }) => (
  <div>
    <header>Layout 2 Header</header>
    <main>{children}</main>
    <footer>Layout 2 Footer</footer>
  </div>
);

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const App = () => (
  <Router>
    <div>
      <Route
        exact
        path="/"
        render={() => (
          <Layout1>
            <Home />
          </Layout1>
        )}
      />
      <Route
        path="/about"
        render={() => (
          <Layout2>
            <About />
          </Layout2>
        )}
      />
    </div>
  </Router>
);

export default App;