12

我有以下组件树：

<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 的并发模式可以帮助解决这个问题？:)

4

4 回答 4

5

这是解决方案

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

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

    return '';
};

<Suspense fallback={<LazyLoad />}>
于 2020-06-02T09:09:27.930 回答
2

下面的内容没有经过测试，因为我已经从更高级的配置中提取了它，但是它应该可以工作。如果您有困难，请发布，以便我们可以更新并解决问题 thx。

npm install react-use react-helmet-async nprogress

创建名为“useMounted”的钩子

import {useEffect, useRef} from 'react';
import {useUpdate} from 'react-use';

export default function useMounted() {
  const mounted = useRef(false);
  const update = useUpdate();
  useEffect(() => {
    if (mounted.current === false) {
      mounted.current = true;
      update();
    }
  }, [update]);
  return mounted.current;
}

创建“ProgressBar”组件

这将允许您传递道具来自定义您的进度条。请注意，这是一个有限的示例，请参阅 NProgress css 文件以了解您可能希望修改的其他 css 样式。

import {Helmet} from 'react-helmet-async';
import useMounted from '../hooks/useMounted'; // your path may differ.
import { useLocation } from 'react-router-dom'; // not needed for nextjs
import nprogress from 'nprogress';

const ProgressBar = (props?) => {
  
  props = {
    color: 'red',
    height: '2px',
    spinner: '20px',
    ...props
  };

  // if using NextJS you will not need the below "useMounted" hook
  // nor will you need the below "useEffect" both will be 
  // handled by the Router events in the below Bonus
  // monkey patch.
  
  const mounted = useMounted();
  const { pathname } = useLocation(); // assumes react router v6
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (!visible) {
      nprogress.start();
      setVisible(true);
    }
    if (visible) {
      nprogress.done();
      setVisible(false);
    }
    if (!visible && mounted) {
      setVisible(false);
      nprogress.done();
    }
    return () => {
      nprogress.done();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname, mounted]);

  // if using the below styles with NextJS wrap the below in
  //     <style jsx global>{`styles here `}</style>;
  // you will not need Helmet either simply return the
  // jsx style.

  const styles = `
     #nprogress .bar {
        background: ${props.color};
        height: ${props.height};
     }
     #nprogress .peg {
        box-shadow: 0 0 10px ${props.color}, 0 0 5px ${props.color};
     }
     #nprogress .spinner-icon {
        width: ${props.spinner};
        height: ${props.spinner};
        border-top-color: ${props.color};
        border-left-color: ${props.color};
     }
  `;

  return (
    <Helmet>
      <style>{styles}</style>
    </Helmet>
  );
};
export default ProgressBar;

使用你的进度条组件

此处显示默认的 create-react-app应用程序。

注意：此示例基于 react-router 版本 6

import React from 'react';
import ReactDOM from 'react-dom';
import ProgressBar from './components/ProgressBar'; // your path may differ

import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Routes } from 'react-router-dom';

import './index.css';
import 'nprogress/nprogress.css';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <ProgressBar />
      <Routes>
       {/* your routes here */}
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

奖金！猴子补丁获取以触发获取进度条。

import nprogress from 'nprogress';
// import Router from 'next/router'; // uncomment for NextJS

function DOMEnabled() {
  return !!(
    typeof window !== 'undefined' &&
    window.document &&
    window.document.createElement
  );
}

// let timer: NodeJS.Timeout; // for typescript use.
let timer;
let state: string;
let activeRequests = 0;

const delay = 250;

function load() {
  if (state === 'loading') return;
  state = 'loading';
  timer = setTimeout(function () {
    nprogress.start();
  }, delay); // only show if longer than the delay
}

function stop() {
  if (activeRequests > 0) return;
  state = 'stop';
  clearTimeout(timer);
  nprogress.done();
}

// Uncomment if using [NextJS][2]

// Router.events.on('routeChangeStart', load);
// Router.events.on('routeChangeComplete', stop);
// Router.events.on('routeChangeError', stop);

if (DOMEnabled()) {
  const _fetch = window.fetch;
  window.fetch = async function (...args) {
    if (activeRequests === 0) load();
    activeRequests++;
    try {
      const result = await _fetch(...args);
      return result;
    } catch (ex) {
      return Promise.reject(ex);
    } finally {
      activeRequests -= 1;
      if (activeRequests === 0) stop();
    }
  };
}
于 2021-11-23T17:02:13.053 回答
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 "";
}
于 2021-07-13T07:08:56.640 回答
-1

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

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()and componentDidMount()。

于 2019-08-21T13:51:07.323 回答