javascript - 更新查询字符串 onChange - ReactJS

Question

我有一个带有查询字符串的网址，如下所示

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}`)

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());

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

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