React Router和Suspense的404路由问题

问题描述

我正在尝试从React 16.12.0使用Suspense进行延迟加载。我也在使用React Router 5.1.2。

这是我第一次使用Suspense，而且我没有设法找到一种正确的方式来加载404 / NoMatch而不会引起其他问题。

我的代码如下：

import Component1 from 'path'
import Component2 from 'path'
import NoMatchPage from 'path
const Component3 = lazy(()=>import('path'));
const Component4 = lazy(()=>import('path'));

<Router>
   <Switch>
        <Route exact path="/route-1" component={Component1}/>
        <Route exact path="/route-2" component={Component2}/>
        <Suspense fallback={<Loader/>}>
            <Route exact path="/route-3" component={Component3}/>
            <Route exact path="/route-4" component={Component4}/>
        </Suspense>
        <Route component={NoMatchPage}/>
   <Switch>
</Router>

这样编写，就永远不会显示“ NoMatchPage”组件。
作为最后一个子项写在Suspense中，它将在任何路径上呈现“ NoMatchPage”组件，该组件放置在应在该路径上呈现的组件之后。
写在Suspense上方，将在任何路径上呈现“ NoMatchPage”组件，该组件将放置在应在该路径上呈现的组件之前。

我检查了官方文档和许多实际示例，但没有发现任何可以解决此问题的东西。

解决方法

也许你已经想通了，但是试着像这样将悬念嵌套在路线中，并为你想要在其上设置悬念后备的每条路线都这样做：

<Route exact path="/route-3"/>
 <Suspense fallback={<Loader />}>
  <Component3/>
 </Suspense>
</Route>

,

从我读到的 the official documentation 中，有一个示例说明 Switch 组件在 Suspense 组件中工作。所以也许对于您的问题，您可以尝试将 Switch 组件移动到 Suspense 组件中（组件 Suspense 的顺序高于组件 Switch ）。下面是一个例子。

  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>

祝你好运！