Reactjs 404页面在每个页面中呈现

我有一个路由文件，其中包含像这样的多个路由

const RouteUI = ({context}) =>
  <Switch>
  <React.Fragment>

    <SDPRouteUI context={context} />

    <SDPMRouteUI context={context} />

    <ACRouteUI context={context} />

    <DCRouteUI context={context} />

    <Route path=""
      render={() =>
        <NotFound context={context} />
      }
    />

  </React.Fragment>

  </Switch>

constrouteui=（{context}）=>
}
/>

NotFound组件将在每个页面上呈现，即使它位于交换机内部

SDPRouteUI、SDPMRouteUI..等是其他路由文件，如

const SDPRouteUI = ({context}) =>
  <Switch>
    <Route exact path='/sdp/account'
      render={() =>
        <SDPAccountPageSF context={context} />
      }
    />

    <Route exact path='/sdp/activate/back'
      render={() =>
        <SDPActivateBackSF context={context} />
      }
    />
<Switch>

constsdprouteui=（{context}）=>
}
/>
}
/>

，也许可以解决您的问题

如果您定义任何没有“路径”道具的路由，交换机组件将自动移动到NotFound组件

---

，可能更有用。准确的路线

顶层Switch语句不起作用，因为第一个不是路由的元素会自动呈现，在您的例子中是

React.Fragment

。即使将Switch元素移动到

React.Fragment

之间，它也不会像其他默认组件那样工作

---

为了处理嵌套路由，您需要具有提供者/使用者模式。参考正确处理404路由

在react路由器中实现404非常简单。在react router组件中，创建未定义路径的路由。并确保将代码放在所有路由的底部，这样路由器将检查所有路由，如果没有找到匹配项，则返回

<Router>
   <Link to="/users">Users</Link>
   <Link to="/search?q=react">Search</Link>
   <Route exact path="/about" component={AboutPage} />
   <Route exact path="/search" component={SearchPage} />
   <Route component={NoMatchPage} />
</Router>

使用者
搜寻

访问任意一个随机URL，您将看到一个简单的404页面。但是等等，让我们检查一下其他页面是否正常工作而不中断。不会的！ 选中about链接，您将看到about和404页面被呈现。因为第一个路由器匹配了/about路径的确切路由，然后它遍历到底部并加载404路由，因为该路由没有定义路径。 React路由器提供一个名为Switch的组件，一旦路由得到解决，它将断开，并且不会加载它下面的任何其他路由组件。 它相当容易实现。将所有路由封装在交换机组件内。让我们这样做，使404页工作没有错误

import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    <section className="App">
      <Router>
        ...
        <Switch>
          <Route exact path="/" component={IndexPage} />
          ...
          <Route exact path="/search" component={SearchPage} />
          <Route component={NoMatchPage} />
        </Switch>
      </Router>
    </section>
  );
};

...

从'react Router dom'导入{Link，browser Router as Router，Route，Switch}；
常量应用=（）=>{
返回(
...
...
);
};
...

---

此交换机组件将检查匹配的路由，如果某个路由已匹配，则会中断对下一个路由的检查。通过这种方式，我们将避免为所有页面呈现404路线。

@ShubhamChopra请告诉我上述答案是否对您有所帮助，但是否确实有用。谢谢