1

我正在尝试使用 React 16.12.0 中的延迟加载和 Suspense。我也在使用 React Router 5.1.2。

这是我第一次使用 Suspense，但我还没有找到合适的方法来加载 a404/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在任何路径上渲染组件，放置在应该在该路径上渲染的组件之前。

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

4

2 回答 2

2

从我阅读的官方文档中，有一个例子是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>

祝你好运！

于 2021-07-10T12:14:54.247 回答
1

也许您已经想通了，但是尝试像这样将悬念嵌套在路线中，并为您想要悬念回退的每条路线执行此操作：

<Route exact path="/route-3"/>
 <Suspense fallback={<Loader />}>
  <Component3/>
 </Suspense>
</Route>
于 2021-03-02T17:59:29.140 回答