如何使用react路由器在整个应用程序中应用特定的布局？

// Layout.js
import React from 'react';

const Layout = ({ children }) => {
  return (
    <div>
      <header>这里是头部</header>
      <main>{children}</main>
      <footer>这里是底部</footer>
    </div>
  );
};

export default Layout;

// withLayout.js
import React from 'react';
import Layout from './Layout';

const withLayout = (Component) => {
  return (props) => (
    <Layout>
      <Component {...props} />
    </Layout>
  );
};

export default withLayout;

// HomePage.js
import React from 'react';
import withLayout from './withLayout';

const HomePage = () => {
  return <div>这是首页内容</div>;
};

export default withLayout(HomePage);

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage'; // 假设你也用withLayout包装了AboutPage

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

export default App;

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Layout from './Layout';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" render={(props) => (
          <Layout>
            <HomePage {...props} />
          </Layout>
        )} />
        <Route path="/about" render={(props) => (
          <Layout>
            <AboutPage {...props} />
          </Layout>
        )} />
      </Switch>
    </Router>
  );
};

export default App;