6 ways to redirect to another page in JavaScript

There are several ways to redirect to another page in JavaScript, these methods will change the current page’s URL and redirect the user to the specified URL. You can provide an absolute URL (starting with “http://” or “https://”) or a relative URL (relative to the current page’s location). Here are six common methods explained below along with examples:

1. Redirect using the window.location.href property

window.location.href is used to get or set the complete URL of the current page.
It is commonly used to redirect the browser to a new page by setting it to a new URL.

// Redirect to a specific URL
window.location.href = "https://www.codeindotnet.com";

// Redirect to a relative URL
window.location.href = "/page2.html"; 

2. Redirect using the window.location.replace() method

window.location.replace() is used to replace the current page in the browser’s history with a new page.
It is typically used for redirects when you don’t want the user to navigate back to the original page using the browser’s back button.

// Redirect to a specific URL
window.location.replace("https://www.codeindotnet.com");

// Redirect to a relative URL
window.location.replace("/page2.html"); 

3. Redirect using the window.location.assign() method

window.location.assign() is used to load a new URL.
It is similar to window.location.href in that it can be used for redirection. However, unlike replace(), it adds the new URL to the browser’s history, allowing the user to navigate back to the original page using the back button.

// Redirect to a specific URL
window.location.assign("https://www.codeindotnet.com");

// Redirect to a relative URL
window.location.assign("/page2.html"); 

4. Redirect using the window.location object

window.location is an object that provides information and methods related to the current URL of the page.
It contains properties such as href, host, pathname, and methods such as reload() and replace().

// Redirect to a specific URL
window.location = "https://www.codeindotnet.com";

// Redirect to a relative URL
window.location = "/page2.html"; 

5. Redirect using the document.location.href property

document.location.href is an alternative way to access the URL of the current page.
It is essentially the same as window.location.href.

// Redirect to a specific URL
document.location.href = "https://www.codeindotnet.com";

// Redirect to a relative URL
document.location.href = "/page2.html"; 

6. Redirect using the location.replace() method

location.replace() is a shorthand method for window.location.replace().
It is used to replace the current page in the browser’s history with a new page, similar to replace().

// Redirect to a specific URL
location.replace("https://www.codeindotnet.com");

// Redirect to a relative URL
location.replace("/page2.html"); 

When to use?

• Use window.location.href or document.location.href when you want to redirect the user to a new page and you want the new URL to be added to the browser’s history.
• Use window.location.replace() or location.replace() when you want to redirect the user to a new page and you don’t want the original page to be stored in the browser’s history.
• Use window.location.assign() when you want to redirect the user to a new page and you want the new URL to be added to the browser’s history, allowing the user to navigate back to the original page.
• Use the window.location object when you need to access or modify properties of the current URL, such as getting the current hostname or pathname.

The choice of which method to use depends on the specific requirements of your application and how you want the redirection to behave.