reactjs - react 路由器 : Show progress while loading

Question

我想在从一条路线切换另一条路线时显示进度条，我找到了这个包:nprogress ，取得类似 YouTube 的进步。

我的问题是使用 React Router 来实现这个。我不知何故需要在每次路由开始时执行 NProgress.start(); ，并在加载时执行 NProgress.done(); 。

是否有更好的方法(例如路由更改之间的中间件或路由器的路由监听器)，然后遍历每个路由并在 onEnter 上执行 start() > 和组件的 DidMount() 上的 done()？

Answer 1

您可以简单地从 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();
      });
    }}
  />