2016-05-10 18 views
0

参考までにReact-Reduxスターターキット(https://github.com/davezuko/react-redux-starter-kit)を基本プロジェクトレイアウトとして使用しています。React-router:ネストされたPlainRouteでgetChildRoutesが実行されない

アイブ氏はTSPという名前のルートを持って、私は私が小道具で上childrenを通過します期待していますコンテナコンポーネント、上の減速を注入するgetComponentとReduxのconnect()を使用しています。

TSPルート定義内のgetChildRoutesは決して呼び出されません。

ルートルータの設定:

import ApplicationLayout from '../layouts/ApplicationLayout'; 
import Home from './Home'; 

export const createRoutes = (store) => { 
    const routes = { 
    path: '/', 
    component: ApplicationLayout, 
    indexRoute: Home, 
    getChildRoutes (location, next) { 
     require.ensure([], (require) => { 
     next(null, [ 
      require('./TSP').default(store), 
      require('./Home').default, 
     ]); 
     }); 
    } 
    }; 

    return routes; 
}; 

export default createRoutes; 

ネストされたルータのコンフィグレーション(TSP):

import { injectReducer } from '../../store/reducers'; 
import Overview from './routes/Overview'; 

export default (store) => ({ 
    path: '/tsp/:id', 
    indexRoute: Overview, 
    getComponent (nextState, next) { 
    require.ensure([ 
     './containers/TSPContainer', 
     './modules/tsp' 
    ], (require) => { 
     const TSP = require('./containers/TSPContainer').default; 
     const reducer = require('./modules/tsp').default; 

     injectReducer(store, { key: 'tsp', reducer }); 
     next(null, TSP); 
    }); 
    }, 
    getChildRoutes (location, next) { 
    debugger 
    require.ensure([], (require) => { 
     next(null, [ 
     // Provide store for async reducers and middleware 
     require('./routes/Offers').default(store), 
     require('./routes/Reviews').default(store) 
     ]); 
    }); 
    } 
}); 

私はgetChildRoutesdebuggerになったことがないのです。

何か助けていただければ幸いです。また、必要なファイルがあれば、追加することができます。

答えて

0

./TSPとのルート定義を同期して読み込んだことはありますか?もしそうでなければ、私はrequire.ensureがそれらのモジュールを依存関係として指定することなく動作するとは思わない。

だから:

getChildRoutes (location, next) { 
    require.ensure([ 
    './TSP', 
    './Home' 
    ], (require) => { 
    next(null, [ 
     require('./TSP').default(store), 
     require('./Home').default, 
    ]); 
    }); 
} 
+0

...いいえサイコロを試していません。ホームルートはうまくロードされているので、トップレベルのTSPルートもあります。しかし、TSPがロードされると、TSPコンストラクタのどこにも 'this.props.children'が見つかると' getChildRoutes'メソッドが呼び出されません見つけられる – chrsmllr

0

はそれを考え出しました。上記TSPネストされたルータの設定で私のIndexRouteは機能、オブジェクトではありませんでした(私が反応し、ルータがindexRouteがオブジェクトであることを期待していたgetChildRoutesを焼成前と仮定しています。)

ソリューションが解決routeConfigを割り当てることでしたOverview~indexRoute

TSP/index.js

import { injectReducer } from '../../store/reducers'; 

export default (store) => ({ 
    path: '/tsp/:id', 
    indexRoute: require('./routes/Overview').default(store), 
    getComponent (nextState, next) { 
    require.ensure([ 
     './containers/TSPContainer', 
     './modules/tsp' 
    ], (require) => { 
     const TSP = require('./containers/TSPContainer').default; 
     const reducer = require('./modules/tsp').default; 

     injectReducer(store, { key: 'tsp', reducer }); 
     next(null, TSP); 
    }); 
    }, 
    getChildRoutes (location, next) { 
    require.ensure([], (require) => { 
     next(null, [ 
     // Provide store for async reducers and middleware 
     require('./routes/Offers').default(store), 
     require('./routes/Reviews').default(store) 
     ]); 
    }); 
    } 
}); 

TSP/routes/Overview/index.js

export default (store) => ({ 
    getComponent (nextState, next) { 
    require.ensure([ 
     './components/OverviewView' 
    ], (require) => { 
     const Overview = require('./components/OverviewView').default; 
     next(null, Overview); 
    }); 
    } 
}); 
関連する問題