一安装
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等实现跳转的