繼上一篇 基於react16 webpack3 搭建前端spa基礎框架 react-router的4種非同步載入方式 繼續講解。
專案原始碼guthub地址：github.com/wangweiange…
這篇文章主要講解對react-router-config的使用，達到配置路由在每個模組裡面管理。
同樣在react開發裡面我也希望如此。 在v4版本以前 動態路由 的配置方式能夠解決我的問題，V4之前版本有興趣的可參考：github.com/wangweiange…
在react-router升級到V4版本之後 react-router-config 能解決我的問題。
參考連結：www.npmjs.com/package/rea…
繼上一次的按需載入之後，來配置一下路由的分開配置，下面主要以圖片來說明。
一：在每個page模組裡面新建一個 router.js 路由管理檔案，如下圖：
router.js 檔案的內容請參考 react-router-config ，下圖給一個案例。
注意：exact引數只能配置一個，一般預設配置跟域名。
二：在app.jsx 檔案統一合併路由，切圖如下：
至此我們的路由拆分就已經完成，非常的簡單。
隨著React Router v4的推出，不再有集中的路由配置。看看下面的切圖，我們可以做到更多的按需載入，和預載入功能。
V4版本的路由還有很多的功能等待我們的挖掘，你可以看看官方文件，看看npm文件，你會發現更多有趣的事情。
由於我並沒有多少react的開發經驗，以上也只是淺顯的一些使用，如果說的有問題的地方歡迎指正。
關注我的部落格：zane的個人部落格
原文地址：react-router4基於react-router-config的路由拆分與按需載入