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

Question

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

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

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

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

提前致谢。

Answer 1

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

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