リアクタルーター：ロード中に進行状況を表示

Question

私は別のルートから1つのルートを切り替えるときにプログレスバーを表示したい、このパッケージを見つけました：nprogress、youtubeのような進歩です。

私の問題は、リアクタを使ってこれを実装していることです。私は何らかの理由で、ルーティングの開始時にNProgress.start();を実行する必要があり、ロードするとNProgress.done();が実行されます。

は、コンポーネントのDidMount()上、他の各ルートthorugh行くとonEnterにstart()をやって、そしてdone()（ルート変更またはルートリスナールータの間のミドルウェアのような）良い方法はありますか？

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

あなたは単にgetComponentでonEnterハンドラと仕上げNProgress.start()か、非同期的にコンポーネントを読み込むことができ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(); 
     }); 
    }} 
    />