将NProgress与“ React.lazy”一起使用

时间:2019-06-18 02:08:29

标签: javascript reactjs progress-bar react-suspense

我有以下组件树:

<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来指示正在加载的页面的加载进度?

3 个答案:

答案 0 :(得分:2)

这是解决方案

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

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

    return '';
};

<Suspense fallback={<LazyLoad />}>

答案 1 :(得分:1)

import { useEffect } from "react";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

export default function TopProgressBar() {
  useEffect(() => {
    NProgress.configure({ showSpinner: false });
    NProgress.start();

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

  return "";
}

答案 2 :(得分:0)

这是我使用react hook的解决方案。

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()