如何在React中为当前URL添加额外的queryParams？

直接用URLSearchParams处理现有查询参数，就能轻松实现你要的效果，不用手动拼接字符串避免格式错误。

正确实现代码 #

import { useHistory, useLocation } from 'react-router-dom';

// 在你的组件内部
const history = useHistory();
const location = useLocation();

// 获取到手机号后调用这个函数
const addPhoneToUrl = (phone) => {
  // 解析当前URL的查询参数
  const currentParams = new URLSearchParams(location.search);
  // 添加/更新phone参数
  currentParams.set('phone', phone);
  // 推送新的路由状态，保留原路径，更新查询参数
  history.push({
    pathname: location.pathname,
    search: currentParams.toString()
  });
};

为什么之前的方法不行？ #

• 第一种history.push(phone=${phone})：这种写法会把phone=xxx当作路径片段追加，React Router会自动在前面加?，但原URL已经有?name=rabin，所以就变成了?&phone=xxx。
• 第二种方法里，你从window.location.hash取pathname的时候，把原查询参数?name=rabin也包含进去了，再加上新的search参数，就导致出现?name=rabin&?phone=xxx的错误格式。用React Router提供的location.pathname就能拿到纯净的路径，不会带查询参数。

补充说明 #

URLSearchParams是浏览器原生API，会自动处理参数拼接的细节：如果原URL没有查询参数，会自动加?；如果已有参数，就用&连接新参数，完全不用手动处理符号问题。

内容的提问来源于stack exchange，提问作者Rabindra Yadav