从v5到v6：React Router升级过程中的关键变更点

从v5到v6：React Router升级过程中的关键变更点

最近项目中将React Router从v5升级到了v6，整个过程可谓是一波三折。今天就来记录一下这次升级踩过的坑和关键变更点。

主要变更点

1. Route组件的使用方式改变 在v5中，我们这样写：

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

而在v6中，需要改为：

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

这个改动看似简单，但实际项目中需要修改所有路由配置，否则会直接报错。

2. Switch组件被Routes替代

// v5
<Switch>
  <Route path="/home">...</Route>
</Switch>

// v6
<Routes>
  <Route path="/home">...</Route>
</Routes>

3. useParams hook的返回值变化

// v5
const params = useParams(); // 返回对象

// v6
const params = useParams(); // 返回对象，但结构有细微差异

实际迁移步骤

1. 先安装v6版本：npm install react-router-dom@latest
2. 逐个替换所有Route组件的写法
3. 修改所有路由配置中的Switch为Routes
4. 检查所有useParams调用处
5. 修复导航链接问题

建议

升级前一定要做好备份，建议先在开发环境测试，避免影响线上服务。这次升级虽然麻烦，但v6的性能确实有提升。

可复现步骤：

1. 创建一个v5项目
2. 安装v6依赖
3. 按照上述方式修改路由配置
4. 运行项目查看效果