react-router-dom v6 如何删除同key下指定的单个query参数值

原生 URLSearchParams 的 delete() 方法默认会清除指定key关联的所有参数值，本身不支持直接删除同key下的单个指定value。另外你原有代码把更新用的URLSearchParams实例定义在remove方法外层，很容易因为闭包拿到过期的查询参数值，导致更新不符合预期。

核心逻辑是先取出目标key下的所有参数值，过滤掉需要删除的指定值后，再重新将剩余值写回查询参数即可，修改后的完整代码如下：

const [searchParams, setSearchParams] = useSearchParams();

const remove = (key, valueToRemove) => {
  // 每次操作基于最新的searchParams创建实例，避免闭包拿到过期参数
  const updatedSearchParams = new URLSearchParams(searchParams.toString());

  // 取出该key对应的所有参数值，返回格式为数组
  const currentValues = updatedSearchParams.getAll(key);
  // 过滤掉需要删除的目标值
  const remainValues = currentValues.filter(val => val !== valueToRemove);

  // 清空该key下原有所有值
  updatedSearchParams.delete(key);
  // 将过滤后剩余的值逐个追加回去
  remainValues.forEach(val => updatedSearchParams.append(key, val));

  setSearchParams(updatedSearchParams.toString());
};

调用效果 #

// 初始示例URL: https://example.com/something?orderby=date&orderby=price&orderby=amount
remove("orderby", "amount");
// 处理后URL: https://example.com/something?orderby=date&orderby=price

特殊场景适配 #

如果同key下存在重复的参数值，你只想删除第一个匹配到的目标值，而不是删除所有匹配值，可以把过滤逻辑替换为按索引删除：

const currentValues = updatedSearchParams.getAll(key);
const matchIndex = currentValues.findIndex(val => val === valueToRemove);
if (matchIndex > -1) {
  // 仅删除第一个匹配项
  currentValues.splice(matchIndex, 1);
}
// 后续逻辑保持一致：清空原key值、追加剩余值即可

内容的提问来源于stack exchange，提问作者Emma Teylor