react-router4基於react-router-config的路由拆分與按需加載

繼上一篇 基於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的路由拆分與按需加載