react中的路由模块化

本是古典何须时尚 2021-09-30 09:52 298阅读 0赞

在vue中，可以将路由单独写在一个配置文件中，便于整理维护，而在前面总结整理的react中，都是直接将路由配置放在需要使用的地方，少数的时候话可以接受，但是当项目做大，这种方式就不再被推荐了，我们再react中，也可以向vue那样，将路由配置模块化，然后在需要使用的地方引入就可以了。

本次路由模块化整理使用的是上一篇的项目，在上一篇的结束，有提供下载链接。

## 项目准备 ##

在上一节的最后，实现了嵌套路由：

![1304208-20181219210511184-1983366342.png][]

这里要实现路由模块化，首先实现单层路由下的模块化，再实现嵌套路由的路由模块化，所以，首先修改一下News.js（因为后面话需要使用嵌套路由，所以这里先注释，而不是删除）。

![1304208-20181219211129152-19066575.png][]

![1304208-20181219211140665-122547785.png][]

## 路由模块化 ##

https://reacttraining.com/react-router/web/example/route-config

查看文档可以看到，实现路由模块化，首先需要使用数组来存储数组，所以先来整理App.js

![1304208-20181219212502462-601770647.png][]  ![1304208-20181219212538234-2076991341.png][]

![1304208-20181219213057194-1054970411.png][] ![1304208-20181219213106832-1340967726.png][]

按照上面这样做，虽然没有报错，但是也没有完全实现想要的效果，为了实现默认显示Home页面，在配置路由的时候，将Home组件的路径配置为“/”，但是这样的话，路径“/news”也会配匹配到，所以还需要在默认显示的模块路径下配置严格匹配模式：

![1304208-20181219213137512-1223250326.png][]  ![1304208-20181219213203562-1435336604.png][]

好了，简易的路由模块化就实现了。

## 代码分离 ##

目前，只有少量的路由，将路由配置放在根组件里，影响也不是很大，但是个人习惯，还是喜欢将路由配置单独配置，其实就是新建一个文件来存储路由配置就可以了。

1，在src文件夹下新建router.js文件。

2，将路由配置移入到router.js并暴露出来。

![1304208-20181219214102760-2019874243.png][]

3，在需要使用路由的位置，这里就是App.js文件中引入router.js，完成。

![1304208-20181219214317752-860130917.png][]

## 嵌套路由的路由模块化 ##

要实现嵌套路由，首先要将上面注释掉的一段代码恢复，然后按照上面一样的配置就可以了。

1，在router.js文件中配置路由。因为时政要闻和娱乐新闻都是News组件下的二级路由，所以使用配置路由的时候也需要嵌套在news路径下。

![1304208-20181219215700770-1396750131.png][]

2，在App.js中，将二级路由使用父子组件传值的方式传递到子组件中去。

![1304208-20181219215308393-197985778.png][]

3，在需要使用嵌套路由的子组件中回去父组件传递的路由值，进行渲染。

![1304208-20181219215556033-1139332268.png][]

到此，嵌套路由的模块化也实现了。

代码下载：[点这里][Link 1]

转载于:https://www.cnblogs.com/yuyujuan/p/10146421.html

[1304208-20181219210511184-1983366342.png]: /images/20210724/74175966ef40436aa8a2f62673a4f6f4.png
[1304208-20181219211129152-19066575.png]: /images/20210724/c904fcd8596c4ef0b3c82d954c8be945.png
[1304208-20181219211140665-122547785.png]: /images/20210724/9b99e184107541dab6ff2c0c227ed83c.png
[1304208-20181219212502462-601770647.png]: https://img2018.cnblogs.com/blog/1304208/201812/1304208-20181219212502462-601770647.png
[1304208-20181219212538234-2076991341.png]: /images/20210724/2ca6d6d90ad14fd18ce7d34524be927a.png
[1304208-20181219213057194-1054970411.png]: https://img2018.cnblogs.com/blog/1304208/201812/1304208-20181219213057194-1054970411.png
[1304208-20181219213106832-1340967726.png]: /images/20210724/5b5fe2cf189448a09ca2a094502919df.png
[1304208-20181219213137512-1223250326.png]: https://img2018.cnblogs.com/blog/1304208/201812/1304208-20181219213137512-1223250326.png
[1304208-20181219213203562-1435336604.png]: /images/20210724/5bb474fe8ee04345b1ce7a751d0b0359.png
[1304208-20181219214102760-2019874243.png]: /images/20210724/710906070e1f4793b09b979abaa7f843.png
[1304208-20181219214317752-860130917.png]: /images/20210724/551552bd0c904059a91cf91a8728dc42.png
[1304208-20181219215700770-1396750131.png]: /images/20210724/294c6a3de82d46dd8abd095518b2fb12.png
[1304208-20181219215308393-197985778.png]: /images/20210724/60f07a4bab434915a309ac71b98699a1.png
[1304208-20181219215556033-1139332268.png]: /images/20210724/ea582459b1f94a54804c99e0cbfa69e1.png
[Link 1]: https://pan.baidu.com/s/1L0iGqLC3g5wGAFRGjCN1pg