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