显示github，youtube就像每次路线变化的进展一样

Question

有一个新概念的代码分裂和异步路由使用悬念和懒惰由react本身引入。有了这个概念，我们如何在路线改变时在页面顶部显示进度条。我可以显示加载图标，文本等但不显示进度条（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"));

懒的loading.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组件，我故意添加3s的超时以查看进度条的运行情况。

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

希望有所帮助！