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/
  • 相关阅读:
    org.apache.commons.net.ftp
    java中的匿名内部类总结
    有关JVM处理Java数组方法的思考
    使用myeclipse创建带注解的model实体类
    Maven导出Project依赖的jar包
    annotation-config, annotation-driven, compont-scan 区别
    hibernate annotation注解方式来处理映射关系
    关于Spring事务<tx:annotation-driven/>的理解(Controller可以使用@Transactional)
    Hibernate批量操作(二)
    Hibernate批量操作(一)
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794644.html
Copyright © 2011-2022 走看看