更新查询字符串 onChange - reactjs

【问题标题】：Update query strings onChange - reactjs更新查询字符串 onChange - reactjs
【发布时间】：2019-11-11 11:48:58
【问题描述】：

我有一个带有查询字符串的 url，看起来像这样

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

当我从日期输入中选择一个日期时，我只想更新filterInitDate。我知道我可以简单地使用this.props.history.push 来更新网址，但是当我更改日期输入时，我怎么能更改/更新filterInitDate

最好是这样的

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

【问题讨论】：

标签： javascript reactjs query-string

【解决方案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());

特定于 react 路由器的示例如下所示：

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

【讨论】：