How to Redirect to Another Page in JavaScript

Redirecting to another page is a common requirement in web development. JavaScript provides several methods to accomplish this. In this article, we'll explore the different ways you can redirect users to another URL using JavaScript and discuss when to use each method.

01. Using `window.location.href()`

The window.location.href() property can be used to get or set the current URL of the browser. By setting this property to a new URL, you can redirect the user to that URL.


// Redirect to another page
window.location.href = 'https://www.example.com';

In the example above, when the JavaScript code is executed, the browser will navigate to https://www.example.com.

02. Using `window.location.assign()`

The window.location.assign() method is another way to redirect to a new page. This method loads the new page and adds the URL to the browser's history, allowing users to use the back button to return to the original page.


// Redirect to another page and add to history
window.location.assign('https://www.example.com');

Similar to window.location.href(), this method navigates to the specified URL and maintains the browser history.

03. Using `window.location.replace()`

The window.location.replace() method also redirects the user to a new page, but it replaces the current page in the browser's history. This means the user will not be able to use the back button to return to the original page.


// Redirect to another page and replace current history entry
window.location.replace('https://www.example.com');

This method is useful when you want to redirect the user without allowing them to navigate back to the previous page.

04. Using `window.location.reload()` for Reloading

If you need to reload the current page, you can use the window.location.reload() method. While this is not for redirecting to another URL, it's useful for refreshing the page.


// Reload the current page
window.location.reload();

This will refresh the page and re-load the content from the server.

05. Using `window.history.pushState()`

The window.history.pushState() method allows you to add a new entry to the browser's history. This means you can update the URL and state object without causing a page reload. It is particularly useful for single-page applications (SPAs) to manage navigation and URL changes without a full page refresh.


// Push a new state into the history
window.history.pushState({ page: 'newPage' }, 'New Page', '/new-page');

06. Using `window.history.replaceState()`

The window.history.replaceState() method is similar to pushState(), but instead of adding a new entry, it replaces the current entry in the browser's history. This method allows you to update the URL and state object without triggering a page reload and without adding a new entry to the history stack.


// Replace the current state in the history
window.history.replaceState({ page: 'anotherPage' }, 'Another Page', '/another-page');

Conclusion

JavaScript provides several methods for redirecting users to another page, including window.location.href(), window.location.assign(), and window.location.replace(). Each method has its use case depending on whether you want to maintain or replace the browser history. Additionally, methods like window.history.pushState() and window.history.replaceState() offer advanced control over URL and history management without reloading the page. Choose the method that best suits your needs for effective page redirection in your web applications.