从v5到v6：React Router架构设计踩坑经验

从v5到v6：React Router架构设计踩坑经验

React Router v6的发布带来了许多重大变化，从v5升级到v6需要重新审视路由架构设计。本文将分享在实际项目中遇到的关键问题和解决方案。

核心变化概述

v6最大的变化是移除了Switch组件，改用Routes组件，并且路由配置方式发生了根本性改变。在v5中我们使用：

<Switch>
  <Route path="/home" component={Home} />
  <Route path="/about" component={About} />
</Switch>

而在v6中需要改为：

<Routes>
  <Route path="/home" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

踩坑经验分享

1. 嵌套路由配置 v6中嵌套路由必须使用相对路径，之前v5的绝对路径方式不再适用。错误示例：

<Route path="/user" element={<UserLayout />}>  
  <Route path="/user/profile" element={<Profile />} />
</Route>

正确方式应该是：

<Route path="/user" element={<UserLayout />}>  
  <Route path="profile" element={<Profile />} />
</Route>

2. useParams Hook使用 v6中useParams返回的参数不再自动解码，需要手动处理URL编码。在v5中：

const { id } = useParams(); // 直接获取解码后的参数

而在v6中：

const { id } = useParams();
const decodedId = decodeURIComponent(id);

3. 路由守卫实现 v6取消了component属性，改为使用element。在v5中：

<Route path="/admin" component={Admin} />

需要改为：

<Route path="/admin" element={<Admin />} />

迁移建议

1. 优先从最外层路由开始升级
2. 注意useNavigate和useLocation的API变化
3. 重构所有路由配置文件时，先确保基本功能正常再添加复杂逻辑
4. 使用工具脚本批量转换路由配置