zoukankan      html  css  js  c++  java
  • 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 在主样式文件中添加样式,然后调试程序,我们实现了路由模块化及嵌套。

    X北辰北的博客,想看更多内容,请移步我的个人博客:http://www.xbeichenbei.com/
  • 相关阅读:
    面向对象的程序设计-2-创建对象
    面向对象的程序设计-1-理解对象
    react组件的生命周期
    react-router 组件式配置与对象式配置小区别
    mobx @computed的解读
    十分钟介绍mobx与react
    less学习
    git-简单流程(学习笔记)
    几种视频编码器的编译及使用方法
    一位程序员工作10年总结的13个忠告
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794644.html
Copyright © 2011-2022 走看看