How to change or modify the URL without reloading the page?

In modern browsers and HTML5, there is a method called pushState on window history. That used to change the URL and push it to the history without reloading the page.

You can do this by passing 3 parameters.

window.history.pushState({page: "PageState"}, "Page title", "URL");

This will change the URL, but page will not reload. Also, this will not check if the page exists or not. So if you want to do something in JavaScript that is reacting to the URL, you can work with them like this.

Another way you can also use history.replaceState() which work exactly same as window.history.pushState. 

 

function changeTo(page, title, url) {

  if ("undefined" !== typeof history.pushState) {

    history.pushState({page: page}, title, url);

  } else {

    window.location.assign(url);

  }

}

changeTo("page state", "Page title", 'New Url');