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

Answer 2

这是我使用反应钩子的解决方案。

import React, { useEffect } from 'react';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

const Loading = () => {
  useEffect(() => {
    NProgress.start();
    return () => {
      NProgress.done();
    };
  }, []);
  return (
    <Row>
      <Col span={12} offset={6}>
        Loading
      </Col>
    </Row>
  );
};

export default Loading;

正如你所看到的，我用来useEffect检测组件状态。

1. NProgress.start();在组件安装时调用
2. NProgress.done();在组件卸载时调用作为清理。

返回值是可选的，你可以渲染任何你想要的。

您还可以使用基于类的组件来实现相同的结果。为此，您可以使用componentWillUnmount()和componentDidMount()。