urlSearchParams not updating the url

Question

I am trying to add search and page to my url for searching and pagination on a page.

 const urlParams = new URLSearchParams(window.location.search);
if(!urlParams.has('search'){
   urlParams.append('search', question);
}
if(!urlParams.has('page'){
   urlParams.append('page', pageIndex);
}

This appears to do nothing to the actual url. But when I call urlParams.toString() then I can see that they have been added, but they are not in the actual url in the browser.

I'm using Chrome 107, so it should support it. Am I missing something?

The documentation has not helped me so far.

Answer 1

Of course it does nothing with the actual URL, you are creating a URLParameters Object and updating it. what you are missing is:

window.location.search = urlParams.toString()

it will change the query string in the browser URL and reloads the page.

if you are not interested in reloading the page, you can use history DOM object

let url = new URL(window.location.href)
if(!(url.searchParams.has('search'))){
   url.searchParams.append('search', question)
}
if(!(url.searchParams.has('page'))){
   url.searchParams.append('page', pageIndex)
}
history.pushState({}, '', url.href)

finally, if you want to update the page and search params anyway, you can use the url.searchParams.set() method, like:

url.searchParams.set('page', pageIndex);

it will append the parameter if it does not exist, and will update it if it does, without throwing exceptions.