私はあなたのルートツリーこうして可視化するでしょう:あなたのindex.jsインサイド
/sites
(Sites.js)
- /:id1
(Site1.js)
- /:id2
(Site2.js)
を、このような何か(クライアント側の例を使用しては):
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="/sites" component={Sites}>
<Route path="/sites/:id" component={Site}/>
</Route>
</Route>
</Router>
), document.getElementById('app'));
各ルートは、添付を持っています成分。これらのコンポーネントに必要なものをスローすることはできますが、子ルートに移動する方法を含めると便利です。
PlainRouteバージョン(私はあなたがしたいと思います理由はわからないが):
const rootRoute = {
component: 'div',
childRoutes: [{
path: '/',
component: require('./components/App'),
childRoutes: [ require('./routes/Sites') ]
}]
}
render(
<Router history={browserHistory} routes={rootRoute} />,
document.getElementById('example')
);
'./routes/Sites ':
module.exports = {
path: 'sites',
getChildRoutes(location, cb) {
require.ensure([], (require) => cb(null, [ require('./routes/Site') ]))
},
getComponent(nextState, cb) {
require.ensure([], (require) => cb(null, require('./components/Sites')))
}
}
' ./routes/Site' :それは/マッピングし、各サイトを作成するときに
module.exports = {
path: 'sites/:id',
getComponent(nextState, cb) {
require.ensure([], (require) => cb(null, require('./components/Site')))
}
}
PlainRoutesを使って、どのようにしてこのようにしますか? – GreeKatrina
私は、JSXが読みやすさの点でより効率的である場合に、PlainRoutesを使用する理由を知りません。この例で使用されているファイル構造に従って、PlainRoutesバージョンで私の最高の試みを私のオリジナルの答えに追加します。 –
[こちら](https://github.com/reactjs/react-router/blob/master/examples/huge-apps/app.js)を参照すると、コード分割に適しています。とにかく、事前に感謝します。 – GreeKatrina