v6路由参数处理方式对比

React Router v6路由参数处理方式对比

从v5升级到v6后，路由参数的处理方式发生了显著变化，这让我在项目迁移时踩了不少坑。

v5中的参数获取

在v5中，我们通过this.props.match.params来获取路由参数：

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

v6中的变化

v6完全移除了match对象，改为使用useParams Hook：

// v6写法
import { useParams } from 'react-router-dom';

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

常见踩坑点

1. 组件内使用问题 之前在v5中，组件可以通过props访问参数，现在必须在函数组件内部调用useParams()。

2. 嵌套路由参数

// v6中嵌套路由的参数获取
<Route path="/user/:userId" element={<UserLayout/>}>
  <Route path="profile" element={<Profile/>}/> 
</Route>

// 在Profile组件中
function Profile() {
  const { userId } = useParams(); // 只能获取到userId
  return <div>用户: {userId}</div>;
}

3. 路由跳转参数传递

// v5
history.push(`/user/${id}/profile`);

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

function SomeComponent() {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate(`/user/${id}/profile`);
  };
}

建议在升级前完整梳理所有路由参数使用点，避免运行时错误。