React Router 4 - 处理嵌套路由的 404答案

【问题标题】：React Router 4 -- handling 404 for nested routesReact Router 4 - 处理嵌套路由的 404
【发布时间】：2019-03-17 11:08:57
【问题描述】：

我有以下代码，我将在输入错误的时候处理嵌套路由：

<Switch>
<Route path="/" exact component={Home} />
<Route path="/sample" exact component={Sample} />
<Route path="/sample/example/:id" exact component={Example} />
<Route path="/sample/:example" exact component={Example} />
<Route component={404}/>
</Switch>

如果用户输入localhost:3000/something-wrong，它将正确显示404页面。但是，当他输入localhost:3000/sample/something-wrong 时，什么都没有渲染！我应该如何以一种方式处理这个问题？

【问题讨论】：

标签： reactjs routes react-router-v4 nested-routes

【解决方案1】：

localhost:3000/sample/something-wrong 由path="/sample/:example" 处理

localhost:3000/sample/example/something-wrong 将由 path="/sample/example/:id" 处理

当您使用通配符时，除了启用 Example 组件来呈现适当的消息，或者重定向到专用的 404 屏幕之外，您实际上无能为力。

【讨论】：