Обновить строки запроса наChange - реагировать

Question

У меня есть URL со строками запроса, который выглядит следующим образом

http://localhost:3000/collection?page=1&limit=15&filter=%27%27&filterInitDate=2019/11/11&filterEndDate=2019/11/11

Я хочу обновить только filterInitDate, когда я выбираю дату из своего ввода даты. Я знаю, что могу обновить URL просто с помощью this.props.history.push, но как я могу просто изменить / обновить filterInitDate, когда я изменяю ввод даты

в идеале что-то вроде этого

history.push(`/collection?filterInitDate=${startDate}`)

Answer 1

Для этого можно использовать классы URL и URLSearchParams , вот пример:

const urlStr = 'http://localhost:3000/collection?page=1&limit=15&filter=%27%27&filterInitDate=2019/11/11&filterEndDate=2019/11/11';
const url = new URL(urlStr);
url.searchParams.set("filterInitDate", "2019/11/12");

console.log(url.toString());

А пример, специфичный для реагирующего маршрутизатора, будет выглядеть так:

const query = new URLSearchParams(history.location.search);
query.set("filterInitDate", startDate);
history.replace({
  search: query.toString()
});