如何在React中创建多个布局？

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

// 布局组件
const MainLayout = ({ children }) => (
  <div>
    <header>主要布局的头部</header>
    <nav>主要布局的导航菜单</nav>
    <div>{children}</div>
    <footer>主要布局的页脚</footer>
  </div>
);

const AlternativeLayout = ({ children }) => (
  <div>
    <header>备选布局的头部</header>
    <div>{children}</div>
    <footer>备选布局的页脚</footer>
  </div>
);

// 页面组件
const HomePage = () => <h1>首页内容</h1>;
const AboutPage = () => <h1>关于页面内容</h1>;

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" render={() => (
        <MainLayout>
          <HomePage />
        </MainLayout>
      )} />
      <Route path="/about" render={() => (
        <AlternativeLayout>
          <AboutPage />
        </AlternativeLayout>
      )} />
    </Switch>
  </Router>
);

export default App;