React 延迟加载的路由使得将不匹配的路由重定向到 /404 不起作用

Posted 2023-02-22

【中文标题】React 延迟加载的路由使得将不匹配的路由重定向到 /404 不起作用

【英文标题】：React lazy loaded route makes redirecting non-matching routes to /404 not work

【发布时间】：2020-09-23 09:24:28

【问题描述】：

我一直在尝试创建一个 404 not found 页面并将所有不匹配的路由重定向到那里，当前将整个上下文配置为：

<Switch>
  <Route path="/faq" component=FAQ></Route>

  <Route path="/404">
    <NotFound />
  </Route>

  <Suspense fallback=<div>Loading ...</div>>
    <Route path="/admin" component=AdminModule></Route>
  </Suspense>

  <Redirect exact=true from="*" to="/404" />
</Switch>

如果我将重定向组件移动到带有延迟加载组件的悬念之上，我将无法再激活管理模块的路由。 如果我在 Suspense 之后移动所有内容，包括 /404，即使手动导航到 /404 路由，它也不再加载 NotFound 组件。

尝试了我在文档中找到的各种其他解决方案，但它们似乎都不起作用，这是设计使然还是错误？如果是设计，那么设计是什么？这似乎是每个应用程序都需要的用例。

【问题讨论】：

你找到解决办法了吗？

很遗憾，因为许多其他原因，我们停止在该特定项目中使用 React

【参考方案1】：

你不应该在 Switch 中使用 Suspense。您的 Switch 必须由 Suspense 组件包装。

<Suspense fallback=<div>Loading ...</div>>
    <Switch>
     <Route path="/faq" component=FAQ></Route>

     <Route path="/404">
         <NotFound />
     </Route>

     <Route path="/admin" component=AdminModule></Route>

     <Redirect exact=true from="*" to="/404" />
  </Switch>
</Suspense>