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

Question

我一直在尝试创建一个 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 组件。

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

Answer 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>