如何在react js和react-router-dom中创建多个布局？

npm install react react-dom react-router-dom

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

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

export default Layout1;

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

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

export default Layout2;

// App.js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Layout1 from './Layout1';
import Layout2 from './Layout2';

const App = () => {
  return (
    <Router>
      <Route path="/page1" component={Layout1} />
      <Route path="/page2" component={Layout2} />
    </Router>
  );
};

export default App;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));