Question

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

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

是否有更好的方法（如路由更改或路由器的路由侦听器之间的中间件），然后在每条路由上执行并在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');
  }
});

Answer 2

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

React Router：加载时显示进度

2 个答案: