显示 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"));

lazyloading.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 中的 ProgressBar。您永远无法显示确切的百分比，因为不同的组件根据使用的副作用采用不同的类型进行渲染 - API 调用、超时等，但此组件在显示进度条方面做得很好。

1) 对于 About 组件，我特意添加了 3 秒的超时时间以查看正在运行的进度条。

2) 你也可以配置不同颜色的进度条。

3) Codesandox link 工作样本。

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

希望对您有所帮助！！！

显示 github，youtube 喜欢每次路线更改的进度

show github, youtube like progress on each route change

javascript

reactjs

react-router-dom

react-suspense