How to change URL dynamically in JavaScript

The HTML5 History API is definitely the way to go for modern websites. It accomplishes the task at hand, while also providing additional functionality. You can use either history.pushState() or history.replaceState() to modify the URL in the browser, depending on your needs:

The arguments for both methods are the same, allowing you to pass a customized serializable state object as the first argument, a customized title (although most browsers will ignore this parameter) and the URL you want to add/replace in the browser's history. Bear in mind that the History API only allows same-origin URLs, so you cannot navigate to an entirely different website.

Using the Location API

The older Location API is not the best tool for the job. It reloads the page, but still allows you to modify the current URL and might be useful when working with legacy browsers. You can modify the URL, using either Window.location.href, location.assign() or location.replace():

As you can see, all three options will cause a page reload, which can be undesirable. Unlike the History API, you can only set the URL, without any additional arguments. Finally, the Location API doesn't restrict you to same-origin URLs, which can cause security issues if you are not careful.

HTML5 History API allows changing a URL without reloading the page using pushState() and replaceState() methods. These methods can be accessed on window.history object in JavaScript. They both modify the history records in the browser but differently.

In this article, I will show you how you can use the history API to update a URL without reloading the page in JavaScript.

How to Change URL Without Page Reload in JavaScript

Modern single-page applications modify the browser's history stack when a user changes the route and displays page content accordingly using JavaScript.

You can also use the pushState() and replaceState() methods to add hash value to the URL. These methods accept multiple arguments to save states for the route.

Then you can extract the state information from the history object and use it to display appropriate content on the page.

Now, let's see how you can use those methods and how they are different from each other with some examples.

Also Read: How to Open URL Using JavaScript in Same or New Tab/Window

Modify URL Using history.pushState() Method

When you call the pushState() method on

          window.history.pushState({ user: "john" }, "", "/settings");
        

0 object, it adds a new entry to the browser history and modifies the URL in the address bar without reloading the page.

This method takes 3 arguments:

          window.history.pushState({ user: "john" }, "", "/settings");
        

1,

          window.history.pushState({ user: "john" }, "", "/settings");
        

2, and

          window.history.pushState({ user: "john" }, "", "/settings");
        

3.

          window.history.pushState(state, unused, url);
        

•           window.history.pushState({ user: "john" }, "", "/settings");
          

  1 – This attribute takes any type of data related to the new URL. You can give a string, number, object, etc as its value. The value will be saved in the

            window.history.pushState({ user: "john" }, "", "/settings");
          

  1 property in the history object. You can get this value using

            window.history.pushState({ user: "john" }, "", "/settings");
          

  6 in JavaScript.

•           window.history.pushState({ user: "john" }, "", "/settings");
          

  2 - This attribute accepts a string to set the page title to the new URL. But most browsers ignore this value. You can not remove this attribute from this method so it is safe to use an empty string.

•           window.history.pushState({ user: "john" }, "", "/settings");
          

  3 - This attribute is optional for the pushState() method. But in order to change the URL, you have to provide its value. You can pass both absolute and relative URLs for this attribute.

Let's see an example to understand how these 3 attributes are used in the pushState() method.

          window.history.pushState({ user: "john" }, "", "/settings");
        

I am calling the pushState() method with 3 arguments. For the

          window.history.pushState({ user: "john" }, "", "/settings");
        

1 argument, I am passing an object with the

          window.history.replaceState(state, unused, url);
        

3 property. You can add as many object properties as you want.

For the unused argument, I am passing an empty string. Because browsers will not use this value.

For the

          window.history.pushState({ user: "john" }, "", "/settings");
        

3 argument, I am providing "/settings". When a browser executes this line, it will change the URL to this path.

That means, if the current URL is

          window.history.replaceState(state, unused, url);
        

5 in the address bar, it will become

          window.history.replaceState(state, unused, url);
        

6 after changing.

In this new URL, you will be able to extract the

          window.history.replaceState(state, unused, url);
        

3 state value by using

          window.history.replaceState(state, unused, url);
        

8 property.

Note: The

          window.history.pushState({ user: "john" }, "", "/settings");
        

3 value must be the same origin as the current URL. If the current origin is

          window.history.replaceState(state, unused, url);
        

5, you can't pass

          window.history.replaceState({ user: "john" }, "", "/about");
        

1 for this attribute. Otherwise, it will throw an error.

Update URL Using history.replaceState() Method

The

          window.history.replaceState({ user: "john" }, "", "/about");
        

2 is another method available on the history object to update the URL without reloading a page in the browser. This method works similarly to the

          window.history.replaceState({ user: "john" }, "", "/about");
        

3 method.

          window.history.replaceState(state, unused, url);
        

It takes the same 3 arguments. Its function is also the same. This method changes the current URL using the

          window.history.pushState({ user: "john" }, "", "/settings");
        

3 attribute value.

The difference between pushState() and replaceState() method is that, as the names suggest, the pushState() method pushes or adds new history to the browser. On the other hand, the

          window.history.replaceState({ user: "john" }, "", "/about");
        

8 method replaces the current history with the new one.

          window.history.replaceState({ user: "john" }, "", "/about");
        

If I am currently at

          window.history.replaceState({ user: "john" }, "", "/about");
        

9 URL and change the URL to pushState()0 using replaceState() method, I can't go back to the

          window.history.replaceState({ user: "john" }, "", "/about");
        

9 URL. Because this method will replace the history of this page with the pushState()0 page.

But if you do the same thing using the pushState() method, you can go back to the

          window.history.replaceState({ user: "john" }, "", "/about");
        

9 page by clicking the back button in the browser. Because it doesn't replace the

          window.history.replaceState({ user: "john" }, "", "/about");
        

9 URL history instead it will add a new entry to the browser history for the pushState()0 URL.

Also Read: How to Check For Hash (#) Value in a URL Using JavaScript

Which Method Should You Use?

Both methods change the URL in the browser's address bar without reloading the page. As you have seen difference, one method adds a new entry to the browser history and another replaces the current history with the new one.

You should use the pushState() method when you want to change the current URL but also want the ability to go back to the previous URL.

On the other hand, you should only use the replaceState() method when you want to replace the current URL with the new URL and don't want to go back to the previous page.

Conclusion

I have discussed two methods from History API in this article. Both of these methods are used to update a URL in the browser.

Now you know how to use them and the difference between the pushState() and replaceState() methods. You can use any of them according to the requirement.

How to change the URL using JavaScript?

How do I change the URL without reloading the page in react?

How to change URL parameter value in JavaScript?

How do I change a dynamic link?