本文使用的 React-router 版本為 2.8.1
React Router自己就有一套按需加載解決方案，將代碼拆分成多個小包，在瀏覽過程中實現按需加載；
如過你的項目搭配了webpack打包工具，那么需要在webpack.config.js的output內加上chunkFilename
output: { path: path.join(__dirname, '/../dist/assets'), filename: 'app.js', publicPath: defaultSettings.publicPath, // 添加 chunkFilename chunkFilename: '[name].[chunkhash:5].chunk.js',},name是代碼里創(chuàng)建chunk指定的名字，如果代碼中沒有指定，則webpack會默認分配id號碼作為name；
chunkhash是文件的hash碼，因為hash碼比較長，所以這里只取前五位。
我們需要讓路由動態(tài)加載組件，需要將 component 換成 getComponent。首先將路由拆出來，創(chuàng)建一個根路由 rootRoute：
const rootRoute = { path: '/', indexRoute: { getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('components/layer/HomePage')) }, 'HomePage') }, }, getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('components/Main')) }, 'Main') }, childRoutes: [ require('./routes/baidu'), require('./routes/404'), require('./routes/redirect') ]}ReactDOM.render( ( <Router history={browserHistory} routes={rootRoute} /> ), document.getElementById('root'));這里有四個屬性：
path
不用多說，匹配路由；
getComponent
對應于以前的 component 屬性，但是這個方法是異步的，也就是當路由匹配時，才會調用這個方法。
這里面有個 require.ensure 方法
require.ensure(dependencies, callback, chunkName)
這是 webpack 提供的方法，這也是按需加載的核心方法。第一個參數是依賴，第二個是回調函數，第三個就是上面提到的 chunkName，用來指定這個 chunk file 的 name。
indexRoute
用來設置主頁。（單獨抽離主頁）
注意這里的 indexRoute 寫法， 這是個對象，在對象里面使用 getComponent。
childRoutes
子路由
這里面放置的就是子路由的配置，對應于以前的子路由們。我們將以前的 /baidu、/404 和 * 都拆了出來，接下來將分別為他們創(chuàng)建路由配置。
路由控制
上面的childRoutes 里面，我們 require 了三個子路由，在目錄下創(chuàng)建 routes 目錄，將這三個路由放置進去。
routes/├── 404│ └── index.js├── baidu│ ├── index.js│ └── routes│ ├── frequency│ │ └── index.js│ └── result│ └── index.js└── redirect └── index.js
和 rootRoute 類似，里面的每個 index.js 都是一個路由對象：
/404/index.js
module.exports = { path: '404', getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('components/layer/NotFoundPage')) }, 'NotFoundPage') }}/baidu/index.js
module.exports = { path: 'baidu', getChildRoutes(partialNextState, cb) { require.ensure([], (require) => { cb(null, [ require('./routes/result'), require('./routes/frequency') ]) }) }, getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('components/layer/BaiduPage')) }, 'BaiduPage') }}/baidu/routes/frequency/index.js
module.exports = { path: 'frequency', getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('components/layer/BaiduFrequencyPage')) }, 'BaiduFrequencyPage') }}等????????????????
下面來說一下設置Redirect
我們需要把這個重定向的路由單獨拆出來，也就是 * 這個路由，我們上面已經為他創(chuàng)建了一個 redirect 目錄。這里使用到 onEnter 方法，然后在這個方法里改變路由狀態(tài)，調到另外的路由，實現 redirect ：
/redirect/index.js官方例子
module.exports = { path: '*', onEnter: (_, replaceState) => replaceState(null, "/404")}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
