React router-v6 路由详解

在 React Router v6 中，路由传参主要有三种方式：params 参数、search 参数和 state 参数。以下是详细用法及场景说明，结合多个来源的实践案例整理：

一、Params 参数（动态路由参数）

适用场景：传递必选参数（如用户 ID、商品 ID）。
实现步骤：

1. 定义路由占位符
   在路由配置中使用 :paramName 格式声明参数占位符：

   <Route path="/user/:id" element={<UserDetail />} />

2. 传参
   通过 navigate 或 <Link> 传递参数：

   // 编程式导航（函数组件）
   import { useNavigate } from 'react-router-dom';
   const navigate = useNavigate();
   navigate('/user/123');  // 直接拼接参数值
   
   // 声明式导航（JSX）
   <Link to="/user/123">用户详情</Link>

3. 取参
   在目标组件中使用 useParams 获取参数：

   import { useParams } from 'react-router-dom';
   const { id } = useParams();  // { id: '123' }

   注意：参数默认是字符串类型，需手动转换数值类型（如 parseInt(id)）

二、Search 参数（URL 查询参数）

适用场景：传递可选参数（如筛选条件、排序规则）。
实现步骤：

1. 传参
   在 URL 中拼接 ?key=value 格式的查询字符串：

   // 编程式导航
   navigate('/search?keyword=react&page=1');
   
   // 声明式导航
   <Link to="/search?keyword=react&page=1">搜索</Link>

2. 取参
   使用 useSearchParams 钩子解析查询参数：

   import { useSearchParams } from 'react-router-dom';
   const [searchParams, setSearchParams] = useSearchParams();
   const keyword = searchParams.get('keyword');  // 'react'
   const page = searchParams.get('page');         // '1'

   特性：支持动态修改参数（setSearchParams({ page: 2 })）

三、State 参数（隐式参数）

适用场景：传递敏感或临时数据（如表单状态），不暴露在 URL 中。
实现步骤：

1. 传参
   通过 state 对象传递参数：

   // 编程式导航
   navigate('/checkout', { 
     state: { productId: '456', quantity: 2 }
   });
   
   // 声明式导航
   <Link to="/checkout" state={{ productId: '456', quantity: 2 }}>结算</Link>

2. 取参
   使用 useLocation 获取 state：

   import { useLocation } from 'react-router-dom';
   const { state } = useLocation();
   const { productId, quantity } = state;  // { productId: '456', quantity: 2 }

   注意：刷新页面时 state 参数会丢失，需通过本地存储或重新加载数据恢复

四、参数传递对比与选择

方式	特点	适用场景
Params	URL 显式，需路由占位符	必选参数（如资源 ID）
Search	URL 显式，无需修改路由	可选参数（如筛选条件）
State	URL 不显式，临时或敏感数据	表单状态、临时跳转

五、常见问题与解决方案

1. 参数类型错误

   • 问题：Params 和 Search 参数默认是字符串类型。
   • 解决：手动转换类型（如 Number(id)） 

2. 类组件传参

   • 问题：v6 移除了 withRouter，类组件无法直接使用钩子。
   • 解决：改用函数组件，或通过高阶组件封装 useParams 

3. 路由刷新参数丢失

   • 问题：State 参数在刷新后丢失。
   • 解决：将关键数据存入 localStorage 或通过接口重新加载 

通过灵活组合这三种传参方式，可以满足 React Router v6 中不同场景的需求。实际开发中建议优先使用 Params 和 Search 参数，仅在需要隐私保护时使用 State 参数。