Javascript 如何正确序列化查询参数？

为了检索当前查询参数，我使用以下方法：

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

function useQuery() {
    return new URLSearchParams(useLocation().search);
}

然后在功能组件中：

const query = useQuery();

但是，除了一个具有新值的查询参数外，我没有找到任何集成的解决方案来轻松地将

链接设置为相同的查询参数

到目前为止，我的解决方案如下：

const filterLink = query => param => value => {
    const clone = new URLSearchParams(query.toString());
    clone.set(param, value);
    return `?${clone.toString()}`;
}

return <>
    <Link to={filterLink(query)('some-filter')('false')}>False</Link>
    <Link to={filterLink(query)('some-filter')('true')}>True</Link>
</>

const filterLink=query=>param=>value=>{
const clone=新的URLSearchParams（query.toString（））；
克隆.set（参数，值）；
返回“？${clone.toString（）}”；
}
返回
假的
真的

我必须克隆
query
对象，以避免在JSX中多次调用
filterLink
时改变原始对象并产生不必要的副作用。我自己也必须添加问号，因为我没有添加问号

我想知道为什么我必须自己做？我真的不喜欢在使用框架时做这么低级的事情。我是不是错过了什么？是否有更常见的做法来满足我的需要？
这是我的oneliner解决方案

从“encodeurl”导入encodeurl；
Object.entries（inputObject）
.map（（[key，value]）=>`${key}=${encodeurl（value）}`）
.加入（“&”）；
我不知道
react路由器
也与查询有关。这是我以前用来设置它的代码

const _encode = v => {
  if (v === undefined || v === null) return ''
  return encodeURIComponent(v)
}

const queryString = params => Object
  .keys(params)
  .map(key => (_encode(key) + '=' + _encode(params[key])))
  .join('&')

就像你说的，我也必须添加
？

我的两美分路由器实际上不支持这些参数。也许
useQuery
只是有点方便，但除此之外，他们在设置路由时不使用这些