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

【问题标题】：React Router: Update only one query parameter instead of replacing allReact Router：只更新一个查询参数而不是全部替换
【发布时间】：2020-08-24 09:34:57
【问题描述】：

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

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

我希望这段代码从以下位置更新 url：

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

到：

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

但是，它会将整个搜索替换为：

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

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

【问题讨论】：

在我看来，您可以创建一个辅助组件来接收具有布尔值的 obj 并通过现有 url 重新创建所有路径，包括您的更改。

标签： javascript reactjs react-router router react-router-dom

【解决方案1】：

在更新查询参数之前，您需要自己合并查询参数。您可以使用query-string (https://www.npmjs.com/package/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) });
    }

 }

【讨论】：