React Router 如何在动态路由需要参数的情况下返回 404 页面？

Question

假设我在 Switch 中定义了以下路由：

<Switch>
    <Route path='/:pageId' component={Template} />
<Switch>

在模板中，我将 :pageId 传递给 API，它返回该页面的内容。一切正常，但是如果我传递一个不存在的 :pageId 值（就像我没有带有“联系人”的页面），应用程序就会崩溃。

在这种情况下如何使其重定向到 404 页面以避免应用程序崩溃？

提前致谢。

Answer 1

由于您只是将变量页面 id 传递给 Route 组件，而不是具体命名每个路由，因此您需要让 Template 组件在服务器不返回任何内容的情况下返回 404 页面。

在没有可用路径与给定路径匹配的情况下，Switch 将采用失败组件，但这仅在您使用特定的命名路径（即，/users不使用链接到可变页面名称的一条路由）的情况下才有效。