reactjs - 如何在 React 中更新 url 中的查询参数？

Question

我正在尝试使用react-js-pagination在我的Web应用程序中创建分页。网页中显示分页，但我想根据页码更改 url 内的页面参数，例如 &page=4。我尝试使用

this.props.history.push(`${window.location.search}&page=${pageNumber}`)

但是每次我点击分页链接时都会附加&page=4。我知道更新网址的方法是错误的。如何根据url中的pageNumber仅更新页面参数？

handlePageChange = (pageNumber) => {
 this.setState({activePage: pageNumber});
 this.props.history.push(`${window.location.search}&page=${pageNumber}`)
}

<Pagination
    activePage={this.state.activePage}
    itemsCountPerPage={10}
    totalItemsCount={100}
    onChange={this.handlePageChange}
/>

Answer 1

您可以使用 location.pathname 代替 location.search，但所有其他查询参数也将被删除。

因此，如果您需要其他参数并且只想更改 page 参数，则可以使用 URLSearchParams javascript 对象，这将更容易替换当前分页。

因此请执行以下操作:

创建一个新变量，其中包含当前 url 和所有参数:

let currentUrlParams = new URLSearchParams(window.location.search);

然后将页面参数更改为该变量中所需的值:

currentUrlParams.set('page', pageNumber);

现在使用 history.push 推送带有新参数的当前 url:

this.props.history.push(window.location.pathname + "?" + currentUrlParams.toString());

所以完整的代码是:

let currentUrlParams = new URLSearchParams(window.location.search);
currentUrlParams.set('page', pageNumber);
this.props.history.push(window.location.pathname + "?" + currentUrlParams.toString());