17 React——路由的模块化及嵌套
一、路由模块化
路由的模块化其实就是类似于vue中的路由模块化,我们通过定义一个数组,将路径和组件包含在里面,然后在配置路由的时候用模块化写法就可以,如下所示:
1 定义路由路径及组件包:
2 配置路由时用模块化写法:
3 在src目录下新建一个route目录,在此目录下新建一个routes组件,然后将上述的数组剪切到这个文件中,如图:
4 最后,在根组件中我们只需引入上述这个路由组件就完成了路由的模块化,如图:
二、路由嵌套
普通写法的路由嵌套就像配置普通路由一样,在需要路由的文件中继续配置路由即可。在此处我们特别说明一下模块化写法下的路由嵌套过程。
1 继续上述步骤的工作开始进行说明。上述我们已经实现了路由的模块化,将路由文件已经进行了抽离,形成了一个单独的文件。接下来我们进行路由嵌套。
2 我们在之前的component文件夹下新建一个user文件夹,然后新建两个组件,分别是userlist和useradd组件,如图:
3 新建组件后我们在路由文件里面配置这两个文件的路由,在user路由下配置两个子路由,如图:
4 然后我们在App根组件中修改我们之前的路由循环写法,如下:
其中的render部分难于理解,大家也可以理解为固定写法。
5 最后我们在User组件中获取我们根组件传过去的参数,然后遍历User组件的子路由写法,如下:
6 在主样式文件中添加样式,然后调试程序,我们实现了路由模块化及嵌套。