如何在 React.lazy 和 Suspense 中获取加载进度

Question

我正在使用lazy来分割我的路线，我想知道是否有任何方法可以让我在lazy和suspense中获得加载进度。

目前我是这样使用的。

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() {
  return (
    <Router>
      <Switch>
        <Suspense fallback={<div>loading</div>}>
          <Route path="/" exact={true} component={Home} />
          <Route path="/About" component={About} />
        </Suspense>
      </Switch>
    </Router>
  );
}

---

■ 但我想显示加载进度（如 youtube）。
■ 有什么方法可以检索进度，例如如下所示。

<Suspense fallback={({progress}) => <LoadingBar progress={progress}/>}>

Answer 1

lazy 使用解析或拒绝的 JavaScript 承诺，但它们不报告任何进展。

但是，您可以使用 http://ricostacruz.com/nprogress/ 之类的东西来伪造进度，它会随机增加进度条。

Answer 2

这是我的解决方案：

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

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

    return '';
};

<Suspense fallback={<LazyLoad />}>