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