React Router：加载时显示进度答案

【问题标题】：React Router: Show progress while loadingReact Router：加载时显示进度
【发布时间】：2016-07-06 22:44:25
【问题描述】：

我想在从另一条路线切换时显示进度条，我找到了这个包：nprogress，用于类似 youtube 的进度。

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

是否有更好的方法（例如路由更改之间的中间件或路由器的路由侦听器），然后遍历每条路由并在onEnter 上执行start()，在组件的DidMount() 上执行done() ?

【问题讨论】：

你是怎么解决这个问题的？
我没有。我最终通过每个路由器并在 onEnter 和 DidMount （分别）上调用 start 和 done

【解决方案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();
      });
    }}
  />

【讨论】：

【解决方案2】：

我最终使用了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');
  }
});

【讨论】：