重定向至React中具有不同页面布局的页面

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

// 布局组件
const DefaultLayout = ({ children }) => (
  <div>
    <header>这是默认布局的头部</header>
    <main>{children}</main>
    <footer>这是默认布局的底部</footer>
  </div>
);

const AlternativeLayout = ({ children }) => (
  <div>
    <header>这是另一种布局的头部</header>
    <main>{children}</main>
    <footer>这是另一种布局的底部</footer>
  </div>
);

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

const App = () => (
  <Router>
    <Route exact path="/">
      <Redirect to="/home" />
    </Route>
    <Route path="/home" render={() => <DefaultLayout><HomePage /></DefaultLayout>} />
    <Route path="/about" render={() => <AlternativeLayout><AboutPage /></AlternativeLayout>} />
  </Router>
);

export default App;