How to update query param in url in React?

Question

I am trying to create pagination in my web application using react-js-pagination. Pagination is showing in webpage but i want to change page param inside url according to page number like &page=4. I tried to use

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

but this is appending &page=4 everytime i click on pagination link. I know this wrong way to update url. How can i update only page parameter according to pageNumber in url?

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}
/>

Atef · Accepted Answer · 2019-01-14 15:27:34Z

15

You could use location.pathname instead of location.search but all the other query parameters will also be deleted.

So if you have other parameters that you need and you only want to change the page parameter, you can use the URLSearchParams javascript object which will make it easier to replace the current pagination.

So do as follows:

Create a new variable which contains the current url with all the params:

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

Then change the page parameter to the value you need in that variable:

currentUrlParams.set('page', pageNumber);

Now push the current url with the new params using history.push:

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

So the full code will be:

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

edited Jan 14, 2019 at 15:27

answered Jan 14, 2019 at 12:14

Atef

1,3221 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vidy Over a year ago

this is changing url from /search?searchTerm=a to /searchTerm=a&page=2

vidy Over a year ago

this.props.history.push({ pathname: '/search', search: ${currentUrl.toString()} })

0xc14m1z · Accepted Answer · 2019-01-14 12:04:41Z

3

I think you should use pathname instead of search:

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

answered Jan 14, 2019 at 12:04

0xc14m1z

3,7252 gold badges16 silver badges24 bronze badges

3 Comments

vidy Over a year ago

It dosent work this changed my url from search?searchTerm=a to search&page=2

0xc14m1z Over a year ago

Oh, you have other parameters! Are you using react-router?

vidy Over a year ago

there are other paramters in url

Collectives™ on Stack Overflow

How to update query param in url in React?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related