路由参数传递：v6实现技巧

路由参数传递：v6实现技巧

React Router v6在路由参数处理方面相比v5有了显著变化，本文将详细介绍v6中路由参数的传递方式和最佳实践。

1. useParams Hook 的使用

在v6中，useParams是获取路由参数的主要方式：

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

function User() {
  const { id, tab } = useParams();
  console.log(id, tab); // 获取路由参数
  return <div>User ID: {id}</div>;
}

2. 动态路由配置

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:id" element={<User />} />
        <Route path="/user/:id/:tab" element={<UserTab />} />
      </Routes>
    </BrowserRouter>
  );
}

3. 参数传递与导航

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

function UserList() {
  const navigate = useNavigate();
  
  const handleUserClick = (userId) => {
    // 方式1: 直接跳转
    navigate(`/user/${userId}`);
    
    // 方式2: 带参数跳转
    navigate(`/user/${userId}/profile`);
  };
}

4. 复杂参数处理

对于复杂对象传递，建议使用URL编码：

function ComplexComponent() {
  const { data } = useParams();
  const decodedData = JSON.parse(decodeURIComponent(data));
  return <div>{JSON.stringify(decodedData)}</div>;
}

5. 参数验证与默认值

function SafeUser() {
  const { id } = useParams();
  
  if (!id) {
    return <div>Invalid user ID</div>;
  }
  
  // 处理逻辑...
}

v6版本的路由参数处理更加直观和安全，建议在升级过程中重点关注这些变化点。