React Router: обновите только один параметр запроса вместо замены всех

Question

Я пытаюсь обновить только один ключ-значение параметра запроса при нажатии кнопки с помощью response-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

По сути, вместо замены всего значения ключа параметра запроса, как я могу заменить только один?

Answer 1

Вам необходимо самостоятельно объединить параметры запроса перед их обновлением. Вы можете использовать библиотеку 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) });
    }

 }