Покажи github, youtube как прогресс на каждом изменении маршрута

Question

Существует новая концепция разделения кода и асинхронной маршрутизации с использованием приостановки и ленивости, представленная самой реакцией. С этой концепцией, как мы можем показать индикатор выполнения в верхней части страницы, когда маршрут меняется. Я мог бы показать значок загрузки, текст и т. Д., Но не индикатор выполнения (от 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;

Вот пример в codeandbox, где у меня тоже есть компонент прогресса, но у меня не было представления о том, как я его реализую при использовании приостановки и ленивости.

https://codesandbox.io/s/zw7mx97293jav

Answer 1

Вы можете просто использовать ProgressBar из react-topbar-progress-indicator, Вы никогда не сможете отобразить точный процент, так как разные компоненты принимают разные типы для рендеринга в зависимости от используемых побочных эффектов - вызова API, тайм-аута и т. Д., Но этот компонент отлично справляется с отображением индикатора выполнения.

1) Для About компонент, я намеренно добавил тайм-аут 3 с, чтобы увидеть индикатор выполнения в действии.

2) Вы можете настроить Progress bar с разными цветами.

3) Кодовая ссылка рабочего образца.

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

Надеюсь, это поможет!!!