React中用useNavigate构建带商品ID和数量的搜索参数跳转

在React Router v6中，useHistory确实已被弃用，官方推荐用useNavigate钩子处理页面跳转。你之前手动拼接查询参数的方式虽能运行，但不够规范——尤其是参数含特殊字符时容易出错，更合理的做法是用URLSearchParams来构建查询参数。

实现步骤： #

1. 从react-router-dom导入useNavigate钩子
2. 在跳转处理函数中，用URLSearchParams管理查询参数，再传递给navigate

完整代码示例： #

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

// 组件内部逻辑
const navigate = useNavigate();

const addToCartHandler = () => {
  // 初始化URLSearchParams实例
  const searchParams = new URLSearchParams();
  // 添加数量参数
  searchParams.set('qty', qty);
  
  // 使用对象格式配置跳转（更清晰易维护）
  navigate({
    pathname: `/cart/${id}`,
    search: searchParams.toString() // 无需手动加?，React Router会自动处理
  });
};

这种方式的优势： #

• 自动编码：URLSearchParams会自动对参数值做URL编码，避免特殊字符导致的URL异常
• 易于扩展：后续要加更多查询参数时，只需调用searchParams.set('key', value)即可
• 符合规范：这是React Router官方推荐的查询参数处理方式，代码可读性更高

另外要确保路由配置中已设置动态购物车路由：

// 路由配置文件中
import { Route, Routes } from 'react-router-dom';
import Cart from './Cart';

<Routes>
  <Route path="/cart/:id" element={<Cart />} />
  {/* 其他路由 */}
</Routes>

内容的提问来源于stack exchange，提问作者John Oliver