javascript - 将 NProgress 与 "React.lazy"一起使用

Question

我有以下组件树:

<BrowserRouter>
  <Suspense fallback={<h1>MyFallback</h1>}>
    <Switch>
      <Route component={HomePage} path="/" exact />
      <Route
        component={lazy(() => import('./pages/Auth/Login'))}
        path="/auth/login"
        exact
      />
    </Switch>
  </Suspense>
</BrowserRouter>

我正在使用 React.Suspense显示加载后备。但是，现在我想在当前页面的顶部显示一个进度条，而不是使用正常的 Suspense 加载回退，这会删除整个当前路由以显示回退。

如何添加 NProgress，例如，指示正在加载的页面的加载进度？

也许新的 React 的并发模式可以帮助解决这个问题？ :)

Answer 1

解决方法

const LazyLoad = () => {
    useEffect(() => {
        NProgress.start();

        return () => {
            NProgress.stop();
        };
    });

    return '';
};

<Suspense fallback={<LazyLoad />}>