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

Question

我正在使用惰性来拆分路线，我想知道是否有任何办法可以使惰性和悬念的加载进度。

目前，我正在像这样使用它。

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 />}>

Answer 2

lazy使用 JavaScript Promise 来解决或拒绝，但它们不报告任何进度。

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