如何在React路由器中使用具有404页的多个布局

npm install react-router-dom

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import DefaultLayout from './DefaultLayout';
import ErrorLayout from './ErrorLayout';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import NotFoundPage from './NotFoundPage';

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

export default App;

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';

const DefaultLayout = ({ children }) => {
  return (
    <div>
      <Navbar />
      <div className="content">
        {children}
      </div>
      <Footer />
    </div>
  );
}

export default DefaultLayout;

import React from 'react';

const ErrorLayout = ({ children }) => {
  return (
    <div>
      <h1>404 Page Not Found</h1>
      {children}
    </div>
  );
}

export default ErrorLayout;

import React from 'react';

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      {/* Add your content here */}
    </div>
  );
}

export default HomePage;

import React from 'react';

const AboutPage = () => {
  return (
    <div>
      <h1>About Us</h1>
      {/* Add your content here */}
    </div>
  );
}

export default AboutPage;

import React from 'react';

const NotFoundPage = () => {
  return (
    <div>
      <h1>Oops! Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
}

export default NotFoundPage;