reactjs – React Router：加载时显示进度

发布时间：2020-12-15 20:19:20 所属栏目：百科来源：网络整理

导读：当我从另一个路径切换一条路线时,我想显示一个进度条,我发现这个包： nprogress,用于类似youtube的进度. 我的问题是使用React Router实现这一点.我不知何故需要执行NProgress.start();在每次路由开始时,和NProgress.done();加载时有没有更好的方法(比如路由

当我从另一个路径切换一条路线时,我想显示一个进度条,我发现这个包： nprogress,用于类似youtube的进度.

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

有没有更好的方法(比如路由更改或路由器的路由侦听器之间的中间件),然后是每个路由并在onEnter上执行start(),在组件的DidMount()上执行done()？

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!