使用react-router-dom@6的useSearchParams如何保留原有查询参数

在使用react-router-dom@6的useSearchParams钩子时，直接传递新参数对象会覆盖原有查询参数。比如执行以下代码：

const filterFunc = (valu) => {
  setSearchParams({ star: valu });
}

实际生成的URL为：http://localhost:3000/products/search?star=1，但预期需要保留原有参数（如q=car），得到http://localhost:3000/products/search?q=car&star=1。

你之前的实现虽然可行，但可以通过以下两种更简洁的方式优化：

方法一：直接操作 URLSearchParams 实例（推荐） #

useSearchParams返回的searchParams本身就是URLSearchParams实例，利用其原生API可以直接修改参数，无需转换为普通对象：

const [searchParams, setSearchParams] = useSearchParams();

const filterFunc = (star) => {
  // 复制当前查询参数，避免直接修改原实例
  const newParams = new URLSearchParams(searchParams);
  // 设置新参数，原有参数会自动保留
  newParams.set('star', star);
  setSearchParams(newParams);
};

这种方式不仅代码更简洁，还能原生支持多值参数（如?tag=a&tag=b）的场景，不会丢失这类特殊格式的参数。

方法二：通过 Object.fromEntries 简化对象转换 #

如果需要将查询参数转为普通对象处理，可以用Object.fromEntries替代手动遍历，再通过扩展运算符合并新参数：

const [searchParams, setSearchParams] = useSearchParams();

const filterFunc = (star) => {
  // 将URLSearchParams转为普通键值对对象
  const currentParams = Object.fromEntries(searchParams);
  // 合并新参数，保留原有所有参数
  setSearchParams({ ...currentParams, star });
};

对比原实现的优势 #

原代码中手动遍历searchParams生成普通对象的逻辑，被Object.fromEntries一行代码替代，代码更简洁易读，同时保留了原有功能。

内容的提问来源于stack exchange，提问作者Baki Durden