目录
1. 前言
2. 变更概览
将 Switch 升级为 Routes
路由匹配组件参数 由 component 改为 element
【React|react-router-dom V6】相对路径识别（子路由不需要补全父路由的path，react会自动补全）
用 useNavigate 替代useHistory
废弃 Redirect 标签，使用 Navigate 标签实现路由重定向
优化路由嵌套，添加 outlet 标签
使用 index 标识默认路由
添加 useResolvedPathhooks
添加 useSearchParams 读取和设置url参数
link 标签跳转的path 将支持 . 和 .. 这种语法（类比于 terminal 中的 cd .. 返回上级菜单 ）
path 通配符将只支持 * 和 ：(以前的？等将不再支持)
添加 useOutletContext 用于 路由之间共享状态
1. 前言 伴随React18的到来，React的路由也有 5.# 版本更新到了 V6版本，接下来让我们总结下 V6 版本的更新内容，对我们的使用有什么影响。
其实官网文档写的很清晰，我这里只是做个总结，大家也可直接移步官网： React Router | Overview
文章图片
https://reactrouter.com/docs/en/v6/getting-started/overview
2. 变更概览
- 将 Switch 升级为 Routes
- 路由匹配组件参数 由 component 改为 element
// before V6
// 注意，这里是 jsx 语法，需要配合标签, 传参也可以直接写为组件传参
- 相对路径识别（子路由不需要补全父路由的path，react会自动补全）
// path: /user
// path: /user/:id
// path: /user/me- 用 useNavigate 替代useHistory
// 函数组件使用编程式跳转// V5
let history = useHistory();
history.push("/home");
// V6
let navigate = useNavigate();
navigate('/home')// 如果需要类比 history.replace, 可以添加参数replace为true
navigate(to, { replace: true })// 如果需要类比隐式传参，可以添加参数 state
navigate(to, { state })// 同时 link 也添加了单独的参数 state
// 如果需要类比 goBack，go等语法，也可直接在 navigate中 传层级参数
// 等价于 history.go(-1)
- 废弃 Redirect 标签，使用 Navigate 标签实现路由重定向
import { Navigate } from "react-router-dom";
function App() {
return - 优化路由嵌套，添加 outlet 标签
import {
Routes,
Route,
Link,
Outlet,
BrowserRouter
} from "react-router-dom";
function Layout() {
return (Welcome to the V6!
{/* 子路由将会显示在这里，用outlet占位 */}
);
}export default App- 使用 index 标识默认路由
- 添加 useResolvedPathhooks
React Router: Declarative Routing for React.js
文章图片
https://v5.reactrouter.com/web/api/Hooks/useparams而 V6 版本又添加了一些hooks，我们简单列举几个可能会用到的，完整版移步官网：
https://reactrouter.com/docs/en/v6/api#resolvepath
文章图片
https://reactrouter.com/docs/en/v6/api#resolvepath
由于V6的相对路径识别特性，有时我们需要获取完整的url路径，可以使用 useRelovedPathuseRelovedPath 必须接收一个参数，可以为空字符串- 添加 useSearchParams 读取和设置url参数
获取某个searchParams： searchParams.get(key)
设置某个searchParams： setSearchParams({key:value})
import {
Routes,
Route,
Link,
Outlet,
BrowserRouter,
useResolvedPath,
useSearchParams
} from "react-router-dom";
function Layout() {
return (Welcome to the V6!
);
}function App() {
return (
);
}export default App- link 标签跳转的path 将支持 . 和 .. 这种语法（类比于 terminal 中的 cd .. 返回上级菜单 ）
// 这里直接拿了官网的示例function App() {
return (
);
}function Users() {
return ({/* This links to /users - the current route */}
Users
{users.map((user) => (
-
{/* This links to /users/:id - the child route */}
{user.name}
))}
);
}function UserProfile() {
return ({/* This links to /users - the parent route */}
All Users{/* This links to /users/:id - the current route */}
User Profile{/* This links to /users/mj - a "sibling" route */}
MJ);
} - path 通配符将只支持 * 和 ：(以前的？等将不再支持)
// 这里直接拿了官网的例子，让我们看下 * 的作用（子孙路由）
import {
BrowserRouter,
Routes,
Route,
Link,
} from "react-router-dom";
function App() {
return (
);
}function Users() {
return (
// path:user/:id
);
}- 添加 useOutletContext 用于 路由之间共享状态
function Parent() {
const [count, setCount] = React.useState(0);
return 推荐阅读
- React|React 组件三大属性
- reactjs|react组件实例对象的三大核心（state,props,refs）
- React|React组件三大核心属性(二)——props
- react|React 组件与组件实例的三大属性
- react技术栈及全家桶|react-router-dom v6 版本使用内容详解
- #|React组件实例的三大属性
- react.js|react-router-dom V6的配置使用
- react|react 路由（react-router-dom 的使用）
- 微信小程序（黑马）|【uniapp小程序】视图容器cover-view