17 React——路由的模块化及嵌套

react

一、路由模块化

路由的模块化其实就是类似于vue中的路由模块化，我们通过定义一个数组，将路径和组件包含在里面，然后在配置路由的时候用模块化写法就可以，如下所示：

1 定义路由路径及组件包：

2 配置路由时用模块化写法：

3 在src目录下新建一个route目录，在此目录下新建一个routes组件，然后将上述的数组剪切到这个文件中，如图：

4 最后，在根组件中我们只需引入上述这个路由组件就完成了路由的模块化，如图：

二、路由嵌套

普通写法的路由嵌套就像配置普通路由一样，在需要路由的文件中继续配置路由即可。在此处我们特别说明一下模块化写法下的路由嵌套过程。

1 继续上述步骤的工作开始进行说明。上述我们已经实现了路由的模块化，将路由文件已经进行了抽离，形成了一个单独的文件。接下来我们进行路由嵌套。

2 我们在之前的component文件夹下新建一个user文件夹，然后新建两个组件，分别是userlist和useradd组件，如图：

3 新建组件后我们在路由文件里面配置这两个文件的路由，在user路由下配置两个子路由，如图：

4 然后我们在App根组件中修改我们之前的路由循环写法，如下：

其中的render部分难于理解，大家也可以理解为固定写法。

5 最后我们在User组件中获取我们根组件传过去的参数，然后遍历User组件的子路由写法，如下：

6 在主样式文件中添加样式，然后调试程序，我们实现了路由模块化及嵌套。