Question

假设我有以下路线：

<Route
    path="/subpage/:slug"
    component={SubPageDetail}
    key="subpage-detail"
/>

<Route
    path="/subpage"
    component={SubPage}
    key="subpage"
/>

对于:slug，我们有某些页面具有匹配项，例如/subpage/subpage-info1。但是，如果有人在/subpage/fhfjadsf33中输入乱码（不存在），我们希望将该用户重定向到/subpage的直接父级（不是主页或其他任何内容）。

我们如何在react-router中实现这一目标？

Answer 1

您有两个选择。您要么让react-router检查路由是否已定义，否则就将用户重定向到默认组件。或者，您可以在代码中包含逻辑以检查URL。我认为第一种选择是最简单的。

只需添加一条路线，即可：

<Route path='*' exact={true} component={MyDefaultComponent} />

Answer 2

您要做的就是添加此路线

<Route component = { ComponentError } />

Corse，您必须创建ComponentError才能显示页面错误或任何您想要的内容。但是，仍然会有问题，在每个页面上都会显示ComponentError，要对此进行调整，您必须将路由包装在这样的switch标记内。

import { Switch } from "react-router-dom"
...
...

<Switch>
<Route path="/subpage" component={SubPage} />
<Route component = { ComponentError } />
</Switch>

Corse我想澄清一下，它在React Router V4上可用。希望对您有所帮助。

对不起，我忘了提及您要做的所有事情，我认为是使用组件子页面更改此CompoenentError。这样，它将为您提供帮助，并帮助其他希望通过该方法实现出众目标的人

如果页面不存在，如何重定向到父路由？

2 个答案: