v6路由配置规范
React Router v6相较于v5带来了重大变化，本文将详细介绍v6的路由配置规范及迁移实践。
核心变化
1. 组件结构重构
v6移除了<Switch>组件，改为使用<Routes>包裹路由组件。这使得路由匹配更加直观和可靠。
// v5
import { Switch, Route } from 'react-router-dom';
// v6
import { Routes, Route } from 'react-router-dom';
2. 路由配置方式
v6中路由配置更加灵活，支持嵌套路由和动态路由。
// 基础路由配置
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/user/:id" element={<User />} />
</Routes>
3. 嵌套路由实践
v6支持更优雅的嵌套路由配置，通过element属性传递组件。
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="user/*" element={<UserLayout />} />
</Route>
</Routes>
迁移步骤
- 安装v6版本：
npm install react-router-dom@latest - 替换Switch为Routes
- 更新路由组件结构
- 重构嵌套路由配置
- 测试所有路由功能
最佳实践
- 使用
useNavigate进行程序化导航 - 合理使用
useParams获取参数 - 配置404页面处理未匹配路由
讨论