How to Change URL Dynamically Without Reloading Page in JavaScript

Single page applications dynamically change URLs without reloading the page in JavaScript. It provides a better and smooth user experience while using an application.

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 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: state, unused, and url.

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

• state – 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 state property in the history object. You can get this value using window.history.state in JavaScript.
• unused - 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.
• url - 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 state argument, I am passing an object with the user 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 url 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 https://example.com in the address bar, it will become https://example.com/settings after changing.

In this new URL, you will be able to extract the user state value by using history.state.user property.

Note: The url value must be the same origin as the current URL. If the current origin is https://example.com, you can't pass https://webmound.com for this attribute. Otherwise, it will throw an error.

Update URL Using history.replaceState() Method

The replaceStare() 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 pushStare() 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 url 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 replateState() method replaces the current history with the new one.

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

If I am currently at /settings URL and change the URL to /about using replaceState() method, I can't go back to the /settings URL. Because this method will replace the history of this page with the /about page.

But if you do the same thing using the pushState() method, you can go back to the /settings page by clicking the back button in the browser. Because it doesn't replace the /settings URL history instead it will add a new entry to the browser history for the /about 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.

I hope you will be able to change a URL without reloading the webpage using JavaScript in your application.