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

lazy使用可以解决或拒绝但未报告任何进度的JavaScript承诺。

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

Answer 2

这是我的解决方案：

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

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

    return '';
};

<Suspense fallback={<LazyLoad />}>

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

2 个答案: