react路由

一、 react路由的基本使用

  • 安装react-router-dom,在入口文件index.js中引入HasRouter组件,并将要使用的到路由的组件进行包裹
  • 在子组件中引入Link,Route
  • Link用来配置路由的跳转路径
    • to属性设置跳转的路由地址

  • Route用来设置展示的组件
    • component用于设置匹配的路径展示的组件
    • path设置匹配的路径
    • exact 属性用于让Router中的path与Link中的to完全匹配
  • Switch标签的作用是将包裹在其中的Router中path重复的进行剔除,只留下唯一的Router
    • 包裹的必须直接是route标签的元素

    二、路由参数传递

     

    2.1 动态路由传参

  • 需要路由参数占位符,:id
  • 触发操作的时候传递具体的参数
  • 在具体的组件中使用传递的参数
  • 首先要在路由内配置匹配规则Route
  • 相关路径的组件需要内部配置Link规则
  • 通过props.match.params获取传入的数据对象
  •  

     

     

    三、路由的嵌套

  • 在路由组件内部书写新的路由规则和渲染的组件
  • 通过props.match.urlprops.match.path可以分别动态的获取上一级的路由Link的to路径和Route的path路径,避免了修改父路由而引发的路径错误
  • 父组件一定要去除excat属性

    四、路由守卫

  • 在Route标签中书写path,并且内部可以进行render操作
  • render中方法传入的参数是所在路由的所有信息,是子组件的thisprops
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值