reactjs - React App 只为 App.js 中的某些路由包装高阶组件

Question

我希望能够只用更高阶的组件包装我的一些路线，这是我的Layout.js，包含一个侧抽屉和一个导航栏。但是我希望 404 页面没有这个更高阶的布局组件包装器，就像这样。

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Layout from './hoc/Layout/Layout';
import Shopping from './containers/Shopping';
import Checkout from './containers/Checkout/Checkout';
import PageNotFound from './components/UI/PageNotFound/PageNotFound';


function App() {
  return (
    <Switch>
      <Layout>
        <Route exact path="/" component={Shopping} />
        <Route exact path="/checkout" component={Checkout} />
      </Layout>
      <Route component={PageNotFound} />
    </Switch>
  );
}

export default App;

发生的情况是路由器永远不会到达<Route component={PageNotFound} />路由。它显示一个带有Layout包装的空白页。

只有当我移动包装器<Route component={PageNotFound} />内部时<Layout><Layout />才会显示页面，但它也会显示我的布局组件。我该怎么做才能将<PageNotFound />组件保留在布局之外？为什么不能Router在 Layout HOC 之外访问它？它应该，因为它是一个更高的顺序。它把它全部包装成index.js这样：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

标签： reactjsreact-routerreact-router-domhigher-order-components