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

【问题标题】：React lazy loaded route makes redirecting non-matching routes to /404 not workReact 延迟加载的路由使得将不匹配的路由重定向到 /404 不起作用
【发布时间】：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

标签： reactjs react-router-dom react-lazy-load

【解决方案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>

【讨论】：