javascript - React Router - 由于自定义路由组件，始终显示 404 页面

Question

我有一个组件，它采用与标准 react-router Route 类似的 Prop 并返回一条路线。这个返回的路由有一个渲染 Prop ，它只是通过组件但添加了一个导航组件。这个习惯NavRoute不适用于 react 路由器 Switch组件，当我在开关内使用自定义组件以及一个全面的 404 页面时，页面总是显示。

如何让 404 组件仅在其他路​​由均不匹配 url 时显示？

导航路线

const NavRoute = ({ exact, path, component: Component }) => {
  return (
    <Route exact={exact} path={path} render={(props) => (
      <div style={styleSideNav}>
        <Nav />
        <Component {...props} />
      </div>
    )}/>
  );
});

用法

  <Switch>
    <NavRoute exact path="/" component={Home} />
    <NavRoute exact path="/about" component={About} />
    <Route path="/" component={Page404} />
  </Switch>

编辑:
完整示例的代码框: https://codesandbox.io/s/react-router-stack-overflow-5jcum
codeandobx 网址: https://5jcum.csb.app/invite/abc

Answer 1

Switch 仅适用于其正下方的第一级组件。它不能遍历整个树。

https://github.com/ReactTraining/react-router/issues/5785#issuecomment-351067856

为了解决这个问题，我们可以传递路由数组而不是包裹在片段中的路由。我已经在代码沙箱中进行了更改和更新。

https://codesandbox.io/s/react-router-stack-overflow-hu62w?file=/src/App.js