汪微的博客
zane,做一个有思维的开发者

汪微的博客

react-router4基于react-router-config的路由拆分与按需加载

2017年11月09日591 browse

继上一篇 基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式 继续讲解。

项目源码guthub地址:https://github.com/wangweianger/react16-webpack3.8-onepage-base-project


这篇文章主要讲解对react-router-config的使用,达到配置路由在每个模块里面管理。



同样在react开发里面我也希望如此。 在v4版本以前 动态路由 的配置方式能够解决我的问题,V4之前版本有兴趣的可参考:https://github.com/wangweianger/react-react-router-webpack

react-router升级到V4版本之后 react-router-config 能解决我的问题。

参考链接:https://www.npmjs.com/package/react-router-config

继上一次的按需加载之后,来配置一下路由的分开配置,下面主要以图片来说明。


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


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


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


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



至此我们的路由拆分就已经完成,非常的简单。


随着React Router v4的推出,不再有集中的路由配置。看看下面的切图,我们可以做到更多的按需加载,和预加载功能。


V4版本的路由还有很多的功能等待我们的挖掘,你可以看看官方文档,看看npm文档,你会发现更多有趣的事情。

由于我并没有多少react的开发经验,以上也只是浅显的一些使用,如果说的有问题的地方欢迎指正。





博主 zane 发表于 2017-11-09 16:45:21,添加在了 react.js 标签下

打赏

您的支持将鼓励我继续努力与分享。

扫码打赏,建议金额1-10元

提醒:打赏金额将直接进此方账号,无法退款,请您谨慎操作。

评论

正在加载验证码......

提交

dd

2019-10-21 19:50:52

mark

2019-10-21 19:50:37

mark

2019-10-21 19:50:08

react-router升级到4.x版本,学习了~

2018-02-07 14:34:06

很有用额,谢谢bo'zhu

2017-11-10 11:10:18