React Router 6 是 react-router-dom 的 v6 版本，此版本已是 create-react-app 创建 react 项目时的默认版本，本文主要记录 v6 版本的基本使用以及常用 API，会与 v5 做一些比较：
更多详情请查阅：React Router 中文文档
NPM 安装
如果项目中还没有安装 React Router 则可以进行如下 NPM 安装，默认安装的就是 v6 版本：
npm i react-router-domComponent
下面是 react-router-dom v6 中常用的组件介绍：
<BrowserRouter>与<HashRouter>
<BrowserRouter> 组件用于包裹整个需要使用到路由组件的应用区域（一般用于包裹整个 <App />），它也表示当前路由模式为 BrowserRouter 模式，除了使用 <BrowserRouter> 之外还可以使用 <HashRouter> 组件，用法相同，它表示当前路由模式为 HashRouter（具体表现为页面地址栏中会出现一个 /# ）
注：v6 版本中的 <BrowserRouter> 和 <HashRouter> 用法与 v5 相同。
代码示例：
-
import
React
from
'react'
-
import
ReactDOM
from
'react-dom/client'
-
import
App
from
'./App'
-
// 引入路由模式的包裹组件 BrowserRouter / HashRouter
-
import {
BrowserRouter }
from
'react-router-dom'
-
-
const root =
ReactDOM.
createRoot(
document.
getElementById(
'root'))
-
root.
render(
-
<BrowserRouter>
-
<App />
-
</BrowserRouter>
注：以下 组件 和 API 除特殊说明外均默认表示是在被上述<BrowserRouter> 或 <HashRouter> 组件包裹的应用区域内使用！
<Routes>与<Route>
v6 版本中移除了先前的 Switch 组件，引入了新的替代者：<Routes>；
<Routes>与<Route>需要搭配使用，且必须要使用 <Routes> 包裹 <Route>（注：哪怕仅有一个 <Route> 也需要使用 <Routes> 包裹，<Routes> 不能省略！）；
<Route> 用于配置路由路径 path 与 组件 element 之间对应的映射关系，只要 path 与当前 URL 匹配（默认为非严格模式）就会渲染 element 配置的组件；
<Route caseSensitive>： caseSensitive 属性用于指定匹配 path 时是否区分大小写，默认 false 不区分；
<Route> 也可以嵌套使用，且可配合 useRoutes() 配置“路由表”，但需要通过 <Outlet> 内置组件来渲染其子路由。
代码示例-常规写法：
-
// ...
-
import {
NavLink,
Routes,
Route}
from
'react-router-dom'
-
//...
-
export
default
function
App(
) {
-
return (
-
<>
-
<h1>App
</h1>
-
<hr />
-
{/* 路由链接 */}
-
<NavLink className="tab" to='/home'>Home
</NavLink>
<br />
-
<NavLink className="tab" to='/about'>About
</NavLink>
<br />
-
<hr />
-
{/* 配置路由映射关系 */}
-
<Routes>
-
<Route path='/home' element={<Home/>} />
-
<Route path='/about' element={<About/>} />
-
</Routes>
-
-
</>
-
)
-
}
代码示例-路由表写法 (v6 新增)：
注：以下代码是写在 src/routes/index.js 文件中
-
// 此文件用于统一配置路由表
-
import {
Navigate}
from
'react-router-dom'
-
import
Home
from
'../pages/Home'
-
import
About
from
'../pages/About'
-
-
// 定义路由表
-
const routes = [
-
{
-
path:
'/home',
-
element:
<Home />,
-
// 配置子路由，没有可以不写
-
children: []
-
},
-
{
-
path:
'/about',
-
element:
<About />
-
},
-
// 仍旧配置路由重定向
-
{
-
path:
'/',
-
element:
<Navigate to='/home' />
-
}
-
]
-
// 导出
-
export
default routes
注：路由表列表中每一个配置项的数据格式类型如下：
使用路由表：
-
//...
-
import {
NavLink, useRoutes}
from
'react-router-dom'
-
// 导入自定义的统一的路由表
-
import router
from
'./routes'
-
-
export
default
function
App(
) {
-
// 根据路由表生成对应的路由规则
-
const routes =
useRoutes(router)
-
return (
-
<>
-
<h1>App
</h1>
-
<hr />
-
{/* 路由链接 */}
-
<NavLink className="tab" to='/home'>Home
</NavLink>
<br />
-
<NavLink className="tab" to='/about'>About
</NavLink>
<br />
-
<hr />
-
{/* 配置路由映射关系 */}
-
{/* 使用路由表的方式 */}
-
{routes}
-
</>
-
)
-
}
注：更推荐使用“路由表”的写法，这样路由配置多了，可以从路由配置表中看出路由的结构以及映射关系，且路由更容易管理。所以后续涉及到路由配置的均出示“路由表”的写法。
<Link>与<NavLink>
<Link>与<NavLink> 的作用都是修改 URL 且不发送网络请求主要用于路由链接跳转，二者的用法完全相同，to 属性指定要跳转的目标路径，区别在于 <NavLink> 可用于自动实现链接“高亮”效果，若当前 URL 与 to 属性的值匹配则该标签会自动添加一个 active 的类名帮助我们实现选中项的“高亮”效果；active 类名也可以自定义，但用处不多，若需要可自行查阅官方文档；如果多级路由时仅想要当前子级的 <NavLink> 处于“高亮”，父级组件的 <NavLink> 不“高亮”则可以给父级的 <NavLInk end> 组件新增 end 属性即可。
示例代码：
-
// ...
-
import {
NavLink}
from
'react-router-dom'
-
-
// ...
-
{
/* 路由链接 */}
-
<
NavLink className=
"tab" to=
'/home'>
Home<
/NavLink><br />
-
<NavLink className="tab" to='/about'>About</NavLink>
<br />
<Navigate>
<Navigate> 内置组件主要可用作 路由重定向 或 默认兜底路由，该组件只要被渲染当前 URL 就会被修改为其 to 属性指定的路径，切换视图：
代码示例-常规写法：
-
import {
Routes,
Route,
Navigate}
from
'react-router-dom'
-
// ...
-
{
/* 配置路由映射关系 */}
-
<
Routes>
-
// ...
-
{
/* 使用 Navigate 组件进行路由重定向 */}
-
<
Route path=
'/' element={
<Navigate to='/home' />} />
-
</
Routes>
代码示例-路由表写法：
-
import {
Navigate}
from
'react-router-dom'
-
// ...
-
// 路由表中配置路由重定向
-
{
-
path:
'/',
-
element:
<Navigate to='/home' />
-
}
<Outlet>
用于当 <Route> 产生嵌套时，渲染其对应的后续子级路由（相当于子级路由的“占位符”）
代码示例：
-
// ...
-
import {
Outlet }
from
'react-router-dom'
-
// ...
-
return (
-
<div>
-
{/* ... */}
-
{/* 放置二级路由显示位置的占位组件 */}
-
<Outlet />
-
</div>
-
)
-
// ...
hooks
以下主要介绍 v6 版本中目前常用的一些 hook ，全量信息请查阅官方
useRoutes()
当配置路由时使用“路由表”的方式时，需要使用 useRoutes() 根据“路由表”创建出对应的 <Routes> 和 <Route> 的路由结构；
代码示例：
-
// ...
-
import { useRoutes }
from
'react-router-dom'
-
// ...
-
// 导入自定义的统一的路由表
-
import router
from
'./routes'
-
-
export
default
function
App(
) {
-
// 根据路由表生成对应的路由规则
-
const routes =
useRoutes(router)
-
return (
-
<>
-
{/* ... */}
-
{/* 使用路由表的方式 */}
-
{routes}
-
</>
-
)
-
}
useNavigate()
useNavigate() hook 返回一个函数用于实现编程式导航，接收两个参数：
参数1：可以指定具体跳转的路径、可以为数字表示前进或后退
参数2：为一个对象：{replace: true/false, state:{}}
代码示例：
-
// ...
-
import { useNavigate }
from
'react-router-dom'
-
export
default
function
Demo(
) {
-
// 编程式导航
-
const navigate =
useNavigate()
-
-
const
back = (
) => {
-
navigate(-
1)
// -1 表示后退一页，可以是多页
-
}
-
-
const
toDetail = id => {
-
navigate(
'detail', {
-
replace:
true,
-
state: {
-
id
-
}
-
})
-
-
}
-
const
go = (
) => {
-
navigate(
1)
// 1 表示前进一页
-
}
-
return (
-
<div>
-
<button onClick={()=> back}>后退
</button>
-
<button onClick={()=> toDetail(1)}>展示详情
</button>
-
<button onClick={()=> go}>前进
</button>
-
</div>
-
)
-
}
useParams()
useParams() hook 路由 params 传参时用于接收参数，返回参数对象。类似于 v5 中的 match.params
注：params 参数时传递的参数会显示在地址栏中，且需要传递的参数需要在路由配置中定义：
-
// params 路由配置参数示例：
-
<
Route path={
/demo/:id} element={
<Demo />}></
Route>
代码示例：
-
// 配置路由时提前预定义参数数量和每个参数的 key
-
<
Route path=
"/foo/:id" element={
<Demo />} />
-
-
// 接收参数：
-
import { useParams }
from
"react-router-dom";
-
export
default
function
Demo(
) {
-
const params =
useParams();
-
return (
-
<div>
-
<h1>{params.id}
</h1>
-
</div>
-
);
-
}
useSearchParams()
useSearchParams() hook 路由 search 传参时用于接收参数，返回一个包含两个值的数组，内容分别为：当前 search 参数，更新 search 的函数。（和 useState() hook 很相似）
注：使用 search 传参时参数会显示在地址栏，但需要传递的参数不需要在路由配置中定义
代码示例：
-
import { useSearchParams }
from
"react-router-dom";
-
-
// 当前路径为 /Demo?id=1
-
function
Demo(
) {
-
// useSearchParams 返回一个包含两个参数的数组
-
const [searchParams, setSearchParams] =
useSearchParams();
-
// 参数1.get(key) 用于获取 search 传递的对应 key 的值
-
console.
log(searchParams.
get(
"id"));
// 1
-
-
return
<div>Demo</div>;
-
}
useLocation()
useLocation() hook 用于获取当前 location 信息，也用于获取路由 state 形式传递的参数，对标 v5 中的路由组件 location 属性。返回一个对象，其中最为常用的是 pathname 和 state 。
注：state 传递的参数不会显示在地址栏，要传递的参数也无需在路由配置中定义，写法示例：
-
// 路由跳转时通过 state 形式携带参数示例：
-
<
Link to=
'detail' state={{
id: msg.
id,
title: msg.
title,
content: msg.
content}}>{msg.
title}</
Link>
使用 useLocation() 接收参数代码示例：
-
// ...
-
// 使用 useLocation 获取路由参数以 state 方式传的参
-
import {useLocation}
from
'react-router-dom'
-
-
export
default
function
Detail(
) {
-
// 接收 state 方式传递的参数
-
const {
state:{id, title, content}} =
useLocation()
-
return (
-
<div>
-
...
-
</div>
-
)
-
}
以上就是 React Router v6 目前比较常用的组件和 API 的基本使用了，希望能帮助大家更快速的上手 Route6 ，更多关于 React Router 的知识请访问官网。
转载：https://blog.csdn.net/qq_43551801/article/details/128082752