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

Question

我有一个组件，它采用与标准react路由器类似的道具路由，并返回路由。此返回路线有一个渲染道具，该道具仅通过组件，但添加了导航组件。此自定义NavRoute不适用于react routerSwitch组件，因为当我在交换机内使用自定义组件以及catch all 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>

编辑：完整示例的Codesandbox： codesandobx的https://codesandbox.io/s/react-router-stack-overflow-5jcumURL：https://5jcum.csb.app/invite/abc

Answer 1

开关只与直接在它下面的第一层组件一起工作。它不能穿越整棵树。

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

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

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