React Router：只更新一个查询参数而不是全部替换

Question

我正在尝试使用 react-router (v5) 在单击按钮时仅更新一个查询参数键值。

const btnClickHandler = () =>{
    history.push({ search: 'popup=false' });
}

我希望此代码从以下位置更新网址：

https://base-url.com/?popup=true&checked=true

到：

https://base-url.com/?popup=false&checked=true

但相反，它将整个搜索替换为：

https://base-url.com/?popup=false

基本上，不是替换所有查询参数键值，我如何只替换一个？

Answer 1

使用 React-router-dom 版本 6，您可以：

    const [searchParams, setSearchParams] = useSearchParams();
    let updatedSearchParams = new URLSearchParams(searchParams.toString());
    updatedSearchParams.set('operation', 'edit');
    setSearchParams(updatedSearchParams.toString());

Answer 2

在更新它们之前，您需要自己合并查询参数。你可以使用query-string图书馆让你的工作更轻松

import qs from 'query-string';

const Component = ({ location}) => {

    const btnClickHandler = () =>{
        const queryParams = qs.parse(location.search);
        const newQueries = { ...queryParams, popup:false};
        history.push({ search: qa.stringify(newQueries) });
    }

 }