React Router:加载时显示进度

Question

当我从另一个路径切换一条路线时,我想显示一个进度条,我找到了这个包:nprogress,用于像youtube一样的进度.

我的问题是使用React Router实现这一点.我不知何故需要NProgress.start();在每次启动路由NProgress.done();时执行,并在加载时执行.

有没有更好的办法(如路由变化或路由器的路由监听器之间的中间件),其他则去thorugh每条路线和做start()的onEnter,并且done()对组件的DidMount()？

Answer 1

我最终react-redux-loading-bar在每个路由定义中使用并调度了必要的操作：

import {ROUTE_CHANGE_END, ROUTE_CHANGE_START} from 'redux/constants';

export default (store) => ({
  path: 'register',
  /*  Async getComponent is only invoked when route matches   */
  getComponent (nextState, cb) {
    store.dispatch({type: ROUTE_CHANGE_START});
    /*  Webpack - use 'require.ensure' to create a split point
        and embed an async module loader (jsonp) when bundling   */
    require.ensure([], (require) => {
      /*  Webpack - use require callback to define
          dependencies for bundling   */
      const Register = require('./containers/RegisterContainer').default;
      const reducer = require('./modules/Register').default;

      /*  Add the reducer to the store on key 'counter'  */
      injectReducer(store, { key: 'register', reducer });

      store.dispatch({type: ROUTE_CHANGE_END});

      /*  Return getComponent   */
      cb(null, Register);

    /* Webpack named bundle   */
    }, 'Register');
  }
});