react-router v6 扩展搜索参数而不是替换它答案

【问题标题】：react-router v6 extending search params instead of replacing itreact-router v6 扩展搜索参数而不是替换它
【发布时间】：2022-01-16 15:26:31
【问题描述】：

目前，执行setSearchParams(/* an object */) 将替换现有的搜索参数。如果我想扩展搜索参数而不是替换它们，例如添加一个新参数。实现这一目标的最优雅方式是什么？

我知道我可以直接修改searchParams，然后执行setSearchParams(newSearchParamsToObject) 之类的操作。然而，因为searchParams 不是对象而是URLSearchParams。代码又长又丑。

编辑：由于有人出现不明白我发布了什么

目前如果我们这样做：

const [searchParams, setSearchParams] = useSearchParams({ a: 1 });
setSearchParams({ b: 2 });

它会将searchParams 替换为?b=2。

我想要实现的是在现有搜索参数中添加b=2，即最终搜索参数应该是?a=1&b=2。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

我想设置您要添加的搜索参数值会/应该是微不足道的。

const [searchParams, setSearchParams] = useSearchParams();

...

searchParams.set(newParamKey, newParamValue);
setSearchParams(searchParams);

const [searchParams, setSearchParams] = useSearchParams();

const clickHandler = () => {
  searchParams.set("b", 2);
  setSearchParams(searchParams);
};

...

<button type="button" onClick={clickHandler}>
  Add "b=2" param
</button>

似乎也有效：

setSearchParams([...searchParams.entries(), ['b', 2]]);

【讨论】：