在vue中，可以將路由單獨寫在一個配置文件中，便於整理維護，而在前面總結整理的react中，都是直接將路由配置放在需要使用的地方，少數的時候話可以接受，但是當項目做大，這種方式就不再被推薦了，我們再react中，也可以向vue那樣，將路由配置模塊化，然后在需要使用的地方引入就可以了。
本次路由模塊化整理使用的是上一篇的項目，在上一篇的結束，有提供下載鏈接。
項目准備
在上一節的最后，實現了嵌套路由：
這里要實現路由模塊化，首先實現單層路由下的模塊化，再實現嵌套路由的路由模塊化，所以，首先修改一下News.js（因為后面話需要使用嵌套路由，所以這里先注釋，而不是刪除）。
路由模塊化
https://reacttraining.com/react-router/web/example/route-config
查看文檔可以看到，實現路由模塊化，首先需要使用數組來存儲數組，所以先來整理App.js
按照上面這樣做，雖然沒有報錯，但是也沒有完全實現想要的效果，為了實現默認顯示Home頁面，在配置路由的時候，將Home組件的路徑配置為“/”，但是這樣的話，路徑“/news”也會配匹配到，所以還需要在默認顯示的模塊路徑下配置嚴格匹配模式：
好了，簡易的路由模塊化就實現了。
代碼分離
目前，只有少量的路由，將路由配置放在根組件里，影響也不是很大，但是個人習慣，還是喜歡將路由配置單獨配置，其實就是新建一個文件來存儲路由配置就可以了。
1，在src文件夾下新建router.js文件。
2，將路由配置移入到router.js並暴露出來。
3，在需要使用路由的位置，這里就是App.js文件中引入router.js，完成。
嵌套路由的路由模塊化
要實現嵌套路由，首先要將上面注釋掉的一段代碼恢復，然后按照上面一樣的配置就可以了。
1，在router.js文件中配置路由。因為時政要聞和娛樂新聞都是News組件下的二級路由，所以使用配置路由的時候也需要嵌套在news路徑下。
2，在App.js中，將二級路由使用父子組件傳值的方式傳遞到子組件中去。
3，在需要使用嵌套路由的子組件中回去父組件傳遞的路由值，進行渲染。
到此，嵌套路由的模塊化也實現了。
代碼下載：點這里