我想在从一条路线切换另一条路线时显示进度条,我找到了这个包:nprogress ,取得类似 YouTube 的进步。
我的问题是使用 React Router 来实现这个。我不知何故需要在每次路由开始时执行 NProgress.start();
,并在加载时执行 NProgress.done();
。
是否有更好的方法(例如路由更改之间的中间件或路由器的路由监听器),然后遍历每个路由并在 onEnter
上执行 start()
> 和组件的 DidMount()
上的 done()
?
最佳答案
您可以简单地从 onEnter
中的 NProgress.start()
开始处理程序并完成于 getComponent
或getComponents
您可以在其中异步加载组件,例如使用 Webpack 的 require.ensure
。
类似这样的事情:
<Route
path="path"
onEnter={() => {
NProgress.start();
}}
getComponent={(nextState, cb) => {
require.ensure([], (require) => {
const Component = require('./path/to/Component').default;
cb(null, Component);
NProgress.done();
});
}}
/>
关于reactjs - react 路由器 : Show progress while loading,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38234993/