404反应路由器和悬念路由问题

Question

我试图使用惰性加载，带有悬念，从反应16.12.0。我还使用了React路由器5.1.2。

这是我第一次使用悬念，而且我还没有找到一种正确的方法来加载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组件将永远不会显示。
• 在悬念中写入，作为最后一个子元素，将在任何路由上呈现NoMatchPage组件，放置在应该在该路径上呈现的组件之后。
• 写在悬念之上，将在任何路由上呈现NoMatchPage组件，放置在应该在该路径上呈现的组件之前。

我已经检查了官方文档和许多实际例子，但是我没有发现任何可以帮助我解决这个问题的东西。

Answer 1

从我所读到的正式文件中，有一个例子表明开关组件在悬念组件中工作。因此，对于您的问题，您可以尝试将开关组件移动到悬念组件(组件悬念的顺序高于组件切换)。下面是一个例子。

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

祝好运!

Answer 2

也许你已经想好了，但是试着像这样在路线内嵌套悬念，然后对每一条你想让悬念退步的路线都这样做：

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