时间戳

首页 > 解决方案 > 如何在反应路由器 v4 中处理未找到的嵌套路由页面？

reactjs - 如何在反应路由器 v4 中处理未找到的嵌套路由页面？

问题描述

我的应用程序中有 2 个不同的部分，第一部分是站点，另一个是管理面板，在这种情况下，我使用 react router dom 嵌套路由，但我无法处理用于面板的 url 的未找到页面；例如，我希望 /dashboard/something 被重定向到我的路由在下面的未找到页面：

<Switch>
    {/* portal */}
    <Route exact path='/' component={Portal} />
    <Route path="/landing" component={Portal} />
    <Route path="/login" component={Portal} />
    <Route path="/callback" component={Callback} />
    <Route path="/activation" component={Portal} />
    <Route path="/confirmation" component={Portal} />
    <Route path="/opportunities/:id" component={Portal} />
    <Route path='/panel' component={Portal} />
    <Route path='/electiondetails/:id' component={Portal} />
    <Route path='/errors' component={Portal} />
    {/* election panel */}
    <Route path='/electionpanel' component={Portal} />
    {/* dashboard */}
    <Route path='/dashboard' component={Index} />
    <Route path='/dashboard/login' component={Index} />
    <Route path='/dashboard/cartable/requests' component={Index} />
    <Route path='/dashboard/elections-management' component={Index} />
    {/* not found */}
    <Route path="/404" component={Portal} />
    <Redirect from="/**/" to="/404"></Redirect>
</Switch>

标签： reactjsreact-router-v4react-router-dom

解决方案

/dashboard/something始终与以下路线匹配：

<Route path='/dashboard' component={Index} />

因此，您将看到该Index组件。如果您需要通过此路线并显示 404 页面，则应将其标记为exact：

<Route exact path='/dashboard' component={Index} />

此外，您不需要重定向到该 404 页面，只需放置一个Routewithout path：

代替

<Route path="/404" component={Portal} />
<Redirect from="/**/" to="/404"></Redirect>

和

<Route component={Portal} />

推荐阅读