reactjs - 如何在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

这是我的解决方案:

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

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

    return '';
};

<Suspense fallback={<LazyLoad />}>