显示 github、youtube 等每次路线更改的进度

Question

React 本身引入了使用 Suspense 和 Lazy 的代码分割和异步路由的新概念。有了这个概念，我们如何才能在路线改变时在页面顶部显示进度条呢？我可以显示加载图标、文本等，但不能显示进度条（0 到 100%）。这是我的做法

const About = lazyLoading(() => import("./components/About"), {
  fallback: <h1>Loading...</h1>
});
const Home = lazyLoading(() => import("./components/Home"), {
  fallback: <h1>Loading...</h1>
});

const BasicExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" render={() => <Home name="hello" />} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};
render(<BasicExample />, document.getElementById("root"));

延迟加载.js

const lazyloading = (importFunc, { fallback = null }) => {
  const LazyComponent = lazy(importFunc);
  return props => (
    <Suspense fallback={fallback}>
      <LazyComponent {...props} />
    </Suspense>
  );
};

lazyloading.defaultProps = {
  fallback: null
};

export default lazyloading;

这是codesandbox中的示例，我也有进度组件，但不知道如何在使用悬念和懒惰的方式时实现它

https://codesandbox.io/s/zw7mx97293jav

Answer 1

您可以只使用react-topbar-progress-indicator. 您永远无法显示确切的百分比，因为不同的组件根据使用的副作用（API 调用、超时等）采用不同的类型进行渲染，但该组件在显示进度条方面做得很好。

1) 对于About组件，我特意添加了 3 秒的超时来查看进度条的运行情况。

2）您也可以配置不同颜色的进度条。

3)工作示例的Codesandox 链接。

import React from "react";
import ReactDOM from "react-dom";
import lazyLoading from "./LazyLoading";
import ProgressBar from "react-topbar-progress-indicator";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";

const About = lazyLoading(
  () => {
    return new Promise(resolve => {
      setTimeout(() => resolve(import("./About")), 3000);
    });
  },
  {
    fallback: <ProgressBar />
  }
);

const Home = lazyLoading(() => import("./Home"), {
  fallback: <ProgressBar />
});

const BasicExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<BasicExample />, rootElement);

希望有帮助！