jQuery Change URL without Redirect 2025 (2 Simple Methods)

Do you want to know a simple method in jQuery to change the URL without redirecting?

On this blog, I have previously published how you can use jQuery to redirect the user to a different URL using 4 different methods.

If you looking for a method to change the URL of the user’s browser without redirecting them to a different URL then you can follow this two simple methods.

With the History API, you can easily update your webpage’s URL. The pushState and replaceState Methods allow you to interact with the History API and modify the URL without reloading the page.

Method 1: using pushState

$(document).ready(function(){
    $("#change-url").click(function(){
        var newUrl = "/new-path"; // Change this to your desired URL
        history.pushState(null, "", newUrl);
    });
});

First, I need to ensure that the script runs only after the document is fully loaded, so I’m using this code

$(document).ready(function(){

Adds a click event listener to the element with the ID change-url.

$("#change-url").click(function(){

Selects the element with the ID change-url and binds a click event listener to it.

var newUrl = "/new-path"; // Change this to your desired URL

Sets a new URL path (/new-path) to replace the current one.

history.pushState(null, "", newUrl);

Now, when the page loads in the user’s browser, the URL will automatically update to the new path, such as "/new-path".

As you can see, I used null because no additional state data needs to be stored.

Also See: How to Pass Multiple Parameters in onClick Function in JavaScript? (4 Methods)

Method 2: using replaceState

$(document).ready(function(){
    $("#change-url").click(function(){
        var newUrl = "/another-path"; // Change this to your desired URL
        history.replaceState(null, "", newUrl);
    });
});

If you don’t want to allow the user to go back, you can use replaceState, which modifies the current history entry.

Here’s how you can achieve this feature:

First, make sure the script runs only after the document has fully loaded.

$(document).ready(function(){

Then, select the element with the ID #change-url and attach a click event listener to it.

$("#change-url").click(function(){

Now, define a new URL path (/another-path) that will replace the current one and store it in a variable.

var newUrl = "/another-path"; // Change this to your desired URL

Uses replaceState to change the current URL without adding a new entry to the browser’s history.

history.replaceState(null, "", newUrl);

null is used because no additional state data is stored.
The second argument (“”) is the page title, which most browsers ignore.
newUrl is the new URL that replaces the current one.

Use Cases for jQuery and History API

Single Page Applications

Dynamically update the URL as users navigate different sections, such as changing /dashboard to /dashboard/settings without reloading the page.

Filtering and Sorting Data

Another great usecase of update the URL to reflect applied filters without refreshing, Example: /products?category=shoes&sort=price-desc

Tracking User Actions

Update the URL when users interact with elements like tabs or dropdowns, improving analytics tracking without disrupting navigation.

Dynamic Content Loading

Update the URL when new content is loaded via AJAX.

Example: Clicking “Load More” changes the URL to /articles?page=2.

Conclusion

Both pushState and replaceState are the best methods to change the URL without redirecting when using jQuery.

Let me know in the comments if you’re familiar with any other methods—I’d love to add them to the discussion.

You might also be interested in How to Pass Multiple Parameters in onClick Function in JavaScript? (4 Methods) or How to Keep Footer at Bottom of Page When Scrolling? (Easy Method).

On this page