How to change Browser URL without reload page with multiple query params using javascript

by

You can change the browser URL without reloading the page by using the history.pushState() method in JavaScript. This method allows you to modify the URL in the address bar of the browser and add query parameters to it. Here’s an example:

function changeURL(newURL, newTitle) {
  window.history.pushState({}, newTitle, newURL);
}

In this example, newURL is the new URL that you want to add to the address bar, and newTitle is the new title that you want to display in the browser tab. You can call this function with the desired values to change the URL in the browser without reloading the page.

query parameters

If you want to add multiple query parameters to the URL, you can simply append them to the end of the URL string using the ? symbol followed by the parameter name and value separated by = symbol. For example:

let newURL = "https://jsgrip.com?param1=value1&param2=value2";
changeURL(newURL, "Page Title");

This would update the URL in the address bar to https://jsgrip.com?param1=value1&param2=value2 and the title of the browser tab to Page Title, without reloading the page.