v6升级代码重构经验

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>

路由跳转更新

useHistory 已被移除，改为使用 useNavigate：

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate('/target');
    // 或者带参数
    navigate('/user/123', { replace: true });
  };
}

嵌套路由处理

v6 中嵌套路由需要使用 useRoutes 或者在父组件中直接定义子路由：

// v6 推荐写法
<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route index element={<Overview />} />
    <Route path="users" element={<Users />} />
  </Route>
</Routes>

实践建议

1. 先备份代码再开始升级
2. 逐步替换路由组件，避免一次修改过多
3. 使用 ESLint 规则自动检测 v5 写法
4. 测试所有路由跳转功能