react-router4基于react-router-config路由配置拆分与模块按需加载

讲解对react-router-config的使用，达到配置路由在每个模块里面管理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

同样在react开发里面我也希望如此。 在v4版本以前 动态路由 的配置方式能够解决我的问题，V4之前版本有兴趣的可参考：https://github.com/wangweianger/react-react-router-webpack文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

在react-router升级到V4版本之后 react-router-config 能解决我的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

参考链接：https://www.npmjs.com/package/react-router-config文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

继上一次的按需加载之后，来配置一下路由的分开配置，下面主要以图片来说明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

一：在每个page模块里面新建一个 router.js 路由管理文件，如下图：

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

router.js 文件的内容请参考 react-router-config ，下图给一个案例。

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

注意：exact参数只能配置一个，一般默认配置跟域名。

二：在app.jsx 文件统一合并路由，切图如下：

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

至此我们的路由拆分就已经完成，非常的简单。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

随着React Router v4的推出，不再有集中的路由配置。看看下面的切图，我们可以做到更多的按需加载，和预加载功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html

V4版本的路由还有很多的功能等待我们的挖掘，你可以看看官方文档，看看npm文档，你会发现更多有趣的事情。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10114.html