5-2 React Router最新v6版本带来了哪些变化
React Router v6 核心变化
React Router v6 于 2021 年 11 月发布（当前最新为 v7），带来了全面的架构重写。核心改进可以用三个关键词概括：更小、更快、更 Hooks 化。
1. 包体积大幅缩小
v6 的包体积比 v5 减少了约 70%，这对首屏加载性能有直接帮助。
2. 全面的 Hooks 化
v6 大量使用 Hooks 替代 v5 的组件式 API，符合 React 函数式编程的发展方向。
3. 声明式路由配置
v6 引入了更简洁的路由声明方式，支持嵌套路由的组件式配置。
v5 vs v6 主要 API 变化
路由配置方式
v5（Switch + Route）：
import { Switch, Route } from 'react-router-dom';
function App() {
return (
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/users/:id" component={User} />
<Route component={NotFound} />
</Switch>
);
}
jsx
v6（Routes + Route）：
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/users/:id" element={<User />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
}
jsx
核心变化：
Switch→Routescomponent={Component}→element={<Component />}exact属性不再需要（v6 默认精确匹配）- 通配符路由从
<Route component={NotFound} />变为<Route path="*" element={<NotFound />} />
嵌套路由
v5：
<Route path="/users" component={Users}>
<Route path="/users/:id" component={UserDetail} />
</Route>
jsx
v6：
<Route path="/users" element={<Users />}>
<Route path=":id" element={<UserDetail />} />
</Route>
jsx
v6 的嵌套路由使用相对路径（":id" 而非 "/users/:id"），配合 <Outlet /> 组件渲染子路由。
导航 API
v5：
import { useHistory } from 'react-router-dom';
function LoginButton() {
const history = useHistory();
return <button onClick={() => history.push('/home')}>登录</button>;
}
jsx
v6：
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
return <button onClick={() => navigate('/home')}>登录</button>;
}
jsx
useHistory → useNavigate，API 更简洁。
路径参数获取
v5：
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}
jsx
v6 中 useParams 的用法保持不变，这算是少数没有改变的 API。
关联库说明
| 库 | 版本要求 | 说明 |
|---|---|---|
react-router-dom | v6+ | Web 端路由（安装时自动安装 react-router） |
history | v5+ | 底层历史管理库（需与 router v6 匹配） |
react-router-native | v6+ | React Native 端路由 |
升级建议
| 场景 | 建议 |
|---|---|
| 新项目 | 直接使用 v6（或 v7） |
| v5 项目维护 | 暂不升级，v5 仍可正常使用 |
| v5 升级到 v6 | 参考官方 v5 到 v6 迁移指南 |
React Router v7（2024 年发布）在 v6 的基础上进一步整合了 Remix 的功能，支持 Server Actions、预渲染等全栈能力，但核心路由 API 与 v6 高度一致。
↑