React v6（仅支持函数组件，不支持类组件）与v5版本路由使用详情和区别（详细版）
1.路由安装(默认安装最新版本6.15.0)
npm i react-router-dom
2.路由模式
有常用两种路由模式可选：HashRouter 和 BrowserRouter。
①HashRouter：URL中采用的是hash(#)部分去创建路由。
②BrowserRouter：URL采用真实的URL资源，无#。
3.常用路由组件和hooks
注意：
v5版本路由是模糊匹配，需加关键字exact和Switch实现精准匹配。
v6版本路由算法改变，默认就是精确匹配（匹配完整路径），如果想匹配某一部分，在路径后加"/*"
例如：
<Route path="/home/:id" element={<Home />}/>
则匹配
path = "/home/123"
path="/home/abc"<Route path="/citylist/*" element={<CityList />}/>
则匹配
path="/citylist"
path="/citylist/123/abc"在v6中Route能够找到最优路径，并不需要像v5讲究先后顺序。
4.<Link/><NavLink/>类似于a标签
老版本v5中NavLink可以设置激活状态时的样式，他有一个activeClassName或activeStyle。
新版本v6中NavLink可以移除了老版本activeClassName或activeStyle，他有一个箭头函数，接收isActive,<Link/>可以跳转但是不能使用以下方式激活样式
import React from 'react'
import "./App.css"
import {NavLink}from "react-router-dom"function App() {return (<div className="App">
{/* 自动会传入isActive,要解构出来,判断是否选中，如果选中追加样式*/}
<NavLink className={({isActive})=>isActive?"active":""} to="/citylist">去城市列表</NavLink>
<NavLink className={({isActive})=>isActive?"active":""} to="/home">去首页</NavLink>//style书写方式
<NavLink style={({isActive})=>{
return {
color:isActive?"red":"black"
}
} to="/home">去首页</NavLink></div>);
}export default App;效果如下：
5.新老版本重定向
老版本：<Redirect to="/login" />
新版本：使用Navigate 进行重定向<Route path="/" element={<Navigate to="/home" />/>,相当于push，会有历史记录，如果<Route path="/" replace element={<Navigate to="/home" />/>使用replace,无历史记录。
6.路由出口与占位(<Outlet/>)，不做过多赘述。
7.useRoutes声明式的路由
①.index.js文件引入并使用
import React from 'react';
import ReactDOM from 'react-dom/client';
// import './index.css';import App from './App';
// 1.引入BrowserRouter路由模式
import {BrowserRouter } from 'react-router-dom'const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>{/* 2.使用 */}<BrowserRouter ><App /></BrowserRouter ></React.StrictMode>
);②router->index.js文件
const OutRoutes=()=>{const routes=useRoutes([{path:"/home",element:<Home/>,// home组件内使用Outlet添加出口,以显示子组件内容,// 注意:子组件不需加绝对路径"/",否则会报错,使用相对路径children:[{path:"detail",element:<Detail/>}] },{path:"/citylist",element:<CityList/>},
//* 404页面，匹配不符合路径{path:"*",element:<NotFound/>}])return routes
}export default OutRoutes③App.js文件
import React, { Suspense } from 'react'
import IndexRouter from "./router"
function App() {return (<div className="App">{/* 使用路由懒加载,渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互。 */}{/* 注意：<IndexRouter></IndexRouter>要用标签的形式,因为他是组件 */}<Suspense><IndexRouter></IndexRouter></Suspense></div>);
}export default App;8.编程式的路由
老版本：
类组件：this.props.history.push("/home")
函数组件：useHistory()
新版本：
useNavigate()
import React from 'react'
import { Link,useNavigate } from 'react-router-dom'export default function CityList() {const naviate = useNavigate();const jump=()=>{naviate("/home/detail");//push的方式// naviate("/home/detail",{replace:true})replace方式}return (<div>城市列表<Link to="/home">去home页面</Link><button onClick={()=>jump()}>跳转</button> </div>)
}9.路由跳转，参数携带以及获取路由参数的三种方式
// push跳转的三种携带参数方式
// 1.携带params参数
Navigate(`/home/c1/${id}/${title}`) ==> useParams()
//2.携带search参数
Navigate(`/home/c1?id=${id}&title=${title}`) ==> useSearchParams()
//3.携带state参数
Navigate("/home/c1",{state:{id,title}}) ==> useLocation()//replace跳转的三种携带参数方式
// 1.携带params参数
Navigate(`/home/c1/${id}/${title}`,{replace:true})
// 2.携带search参数
Navigate(`/home/c1?id=${id}&title=${title}`,{replace:true})
//3.携带state参数
Navigate("/home/c1",{state:{id,title},replace:true})注意：新版本类组件如果想获取以上三种获取参数的方式，要么使用函数组件，要么使用高阶组件。