Question

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

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

我认为您应该使用pathname而不是search：

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

Answer 2

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

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

执行以下操作：

创建一个新变量，其中包含带有所有参数的当前网址：

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

然后将page参数更改为该变量中所需的值：

currentUrlParams.set('page', pageNumber);

现在使用history.push使用新的参数推送当前网址：

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

如何在React中更新URL中的查询参数？

2 个答案: