react路由的理解与使用

一安装

cnpm install react-router-dom -S

二,引入(BrowserRouter:浏览器模式路由,HashRouter:hash路由模式

import { BrowserRouter as Router, HashRouter , Route,  Routes } from 'react-router-dom'

三:配置路由

 四,路由跳转

注意:react-router-domV6.0.0以上回调或style更改样式,而6以下版本是使用activeStyle,activeClassName更改的

 子级路由写法

这种写法在跳转子页面的时候,是不能覆盖父页面,要想彻底覆盖父页面可以将该路由写到父路由Route中去,代码如下:

 注意:react-router-domV6.0.0以上是Routes标签,而6以下版本是使用Switch标签实现的

 

 

五,路由传值

1,动态路由传值

注意:react-router-domV6.0.0以上接收的详情页必须是函数组件类型不能是类组件类型,并且用里面useParams方法接收数据的,而6以下版本是使用this.props接收传过来的值

 

 方法2:query传值

注意:react-router-domV6.0.0以上接收的详情页必须是函数组件类型不能是类组件类型,并且用里面useSearchParams方法接收数据的,而6以下版本是使用this.props接收传过来的值

 

 方法3;state传值

注意:react-router-domV6.0.0以上接收的详情页必须是函数组件类型不能是类组件类型,并且用里面useLaction方法接收数据的,而6以下版本是使用pathname结合this.props传递接收传过来的值

 

 方法4,通过路由中element给组件传值

注意:react-router-domV6.0.0以上element传递组件,携带数据的,而6以下版本是使用return组件标签携带值的

 

 方法5,编程式导航传参

注意:react-router-domV6.0.0以上用useNavigate结合(useSearchParams或useSearchParams携带数据的,而6以下版本是使用this.porps.history.goBack/push/go等实现跳转的

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值