React Router v6升级踩坑实录：从v5到v6的迁移血泪史

React Router v6作为React生态中的重要路由库，其升级带来了诸多变化。本文将分享在实际项目中从v5迁移到v6过程中遇到的典型问题及解决方案。

核心变化概述

1. 嵌套路由语法调整

v5中使用<Route>组件嵌套的方式，在v6中被完全移除。必须使用<Routes>替代<Switch>，且所有路由必须放在<Routes>内部。

v5写法：

<Switch>
  <Route path="/user">
    <User />
  </Route>
</Switch>

v6写法：

<Routes>
  <Route path="/user" element={<User />} />
</Routes>

2. 路由参数获取方式变更

v5中的this.props.match.params在v6中被useParams() Hook替代。

v5：

const User = (props) => {
  const { id } = props.match.params;
  return <div>用户ID: {id}</div>;
}

v6：

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

const User = () => {
  const { id } = useParams();
  return <div>用户ID: {id}</div>;
}

3. 嵌套路由迁移实践

迁移时需要重构所有嵌套路由结构。使用useNavigate()替代history.push()，并注意<Outlet>的使用。

// v6路由配置示例
<Routes>
  <Route path="/" element={<Layout />}> 
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="user/*" element={<UserLayout />}> 
      <Route index element={<UserList />} />
      <Route path=":id" element={<UserDetail />} />
    </Route>
  </Route>
</Routes>