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