You can use the history.pushstate() function to modify the URL without reloading the page using JavaScript.
To enhance the user experience in the web application, we use JavaScript to update the browser’s URL without reloading the page. It is more useful in single-page applications (SPAs). There are a few functions in JavaScript that are used to modify the URL, such as pushstate(), replacestate(), popstate event, and updating Query parameters. We will discuss these methods in this blog in detail.
Table of Contents:
Why Modify the URL Without Reloading?
- User Experience: The user experience can be enhanced by navigating the users to different sections without interruption.
- Single Page Application: SPA frameworks like React and Angular can be used to create a smooth transition between the views.
- Maintaining State: The users can share their URL, which is composed of the state information without page reload.
- SEO optimization: If you modify URLs correctly, it helps search engines find and index different parts of your web application more easily.
Methods to Modify the URL Without Reloading the Page Using JavaScript
You can find the window.history API by JavaScript, which include functions like pushstate(), replacestate() to manipulate the browser history. Let’s discuss them below.
Method 1: Using pushstate() Function
You can add the new entry to the browser history using the pushstate() function. Using the browser’s navigation button, the user can navigate back and forth between the pages.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PushState Example</title>
</head>
<body>
<h1>PushState Example</h1>
<button onclick="changeUrl('/new-page')">Go to New Page</button>
<script>
function changeUrl(path) {
history.pushState(null, "", path);
console.log("URL changed to: " + window.location.pathname);
}
</script>
</body>
</html>
Output:
Explanation: The button is created, which changes the URL when it is clicked. The code uses pushstate() to modify the URL without reloading the page. And track the navigation history, allowing the user to use the browser back and forward.
Method 2: Using replacestate() Function
You can use the replacestate() function to change the current page URL without creating new history entries.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReplaceState Example</title>
</head>
<body>
<h1>ReplaceState Example</h1>
<button onclick="replaceUrl('/updated-page')">Update URL</button>
<script>
function replaceUrl(path) {
history.replaceState(null, "", path);
console.log("URL updated to: " + window.location.pathname);
}
</script>
</body>
</html>
Output:
Explanation: This code updates the URL without adding a new entry in the browser. It maintains the same state and does not affect the browser navigation movements.
Method 3: Listening for Popstate Event
In the above methods, the browser’s back button does not automatically activate the popstate event. To solve this problem, you can set up the event listener for the popstate event.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popstate Example</title>
</head>
<body>
<h1>Popstate Event Example</h1>
<button onclick="changeUrl('/page1')">Go to Page 1</button>
<button onclick="changeUrl('/page2')">Go to Page 2</button>
<script>
function changeUrl(path) {
history.pushState(null, "", path);
console.log("URL changed to: " + window.location.pathname);
}
window.addEventListener("popstate", function(event) {
console.log("Navigated to: " + document.location.pathname);
});
</script>
</body>
</html>
Output:
Explanation: Two buttons dynamically change the URL, and when navigating to the history, the popstate event gets triggered.
Method 4: Updating Query Parameters Without Reloading
You can update the query parameter, like search filter, without reloading.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update Query Parameter</title>
</head>
<body>
<h1>Update Query Parameter Example</h1>
<button onclick="updateQueryParam('category', 'electronics')">Set Category to Electronics</button>
<script>
function updateQueryParam(param, value) {
let url = new URL(window.location);
url.searchParams.set(param, value);
history.pushState(null, "", url);
console.log("Query parameter updated: " + url.search);
}
</script>
</body>
</html>
Output:
Explanation: You can use the URL API to modify the query parameters. This method changes the URL without reloading the page and stores the new state in history.
Conclusion
You can use JavaScript to modify the URL without reloading the page. Methods like pushstate(), replacestate(), popstate event, and updating Query parameters are used to modify the URL. These methods enhance the user experience, provide the proper transition between the views in SPA, and maintain the state information. The above-discussed methods are the most efficient way to modify the URL without reloading the page.
How to Modify the URL Without Reloading the Page Using JavaScript? – FAQs
1. What’s the difference between pushState() and replaceState()?
The pushstate() adds a new entry in the history stack, and replacestate() modifies the current entry without adding a new entry.
2. Will pushState() or replaceState() reload the page?
No, both methods are used to change the URL without reloading the page.
3. How can I see the URL changes in the console?
You can use the popstate event listener to log the changes to the console.
4. What parameters do pushState() and replaceState() accept?
These methods accept the parameters like state object, title, and URL.
5. Can I modify the URL hash without reloading the page?
Yes, you can modify the URL hash using window.location.hash without reloading the page.