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})注意：新版本类组件如果想获取以上三种获取参数的方式，要么使用函数组件，要么使用高阶组件。
