JavaScript redirects send the current browser page to another URL. The most common options are window.location.href, location.assign(), and location.replace(). They look similar, but they differ in how they affect browser history and the Back button.
Use redirects carefully. For normal site navigation, an HTML link is usually better. Use JavaScript redirection when the target depends on application logic, form state, authentication state, or a timed browser action.
Environment: Node.js v20.18.2. After each runnable snippet, the following paragraph states the expected console output (order and values).
Method 1: Redirect with location.href
Assigning location.href changes the current page to a new URL.
window.location.href = "https://example.com/dashboard";You can also use a relative path:
window.location.href = "/dashboard";This behaves like normal navigation and usually leaves the previous page in browser history.
Method 2: Redirect with location.assign()
location.assign() loads a new document and keeps the current page in session history.
window.location.assign("/dashboard");A helper test used for this article:
function redirectWithAssign(location, url) {
location.assign(url);
return location.calls.join("|");
}
const fakeLocation = {
calls: [],
assign(url) {
this.calls.push("assign:" + url);
},
};
console.log("redirect-assign:", redirectWithAssign(fakeLocation, "/dashboard"));You should see one line logging redirect-assign: assign:/dashboard.
Use assign() when users should be able to press Back and return to the previous page.
Method 3: Redirect with location.replace()
location.replace() redirects without keeping the current page as a history entry.
window.location.replace("/login");Use replace() after logout, expired sessions, or one-time intermediate pages where returning with the Back button would be confusing.
Method 4: Redirect After a Delay
Use setTimeout() when the redirect should happen after a short message or countdown.
setTimeout(() => {
window.location.href = "/thank-you";
}, 3000);For accessibility and user trust, avoid unexpected redirects. Tell users what is happening when the redirect is delayed.
Method 5: Redirect Based on a Condition
JavaScript redirects are often used after checking application state.
const isLoggedIn = false;
if (!isLoggedIn) {
window.location.replace("/login");
}For authentication and authorization, client-side redirects are not enough by themselves. Server-side checks must still protect private routes and data.
location.href vs assign vs replace
location.href = url and location.assign(url) both navigate to a new URL and keep the previous page in history in normal browser navigation. location.replace(url) navigates but replaces the current history entry.
Choose based on Back button behavior:
- Use
hreffor simple redirects. - Use
assign()when you prefer method syntax and normal history behavior. - Use
replace()when the current page should not remain in history.
Common Questions About JavaScript Redirects
How do I redirect to another URL in JavaScript?
Use window.location.href = "https://example.com" or window.location.assign("https://example.com").
How do I redirect without allowing Back to the previous page?
Use window.location.replace("/target"). It replaces the current history entry.
Is JavaScript redirect good for SEO?
Server-side redirects are usually better for permanent SEO-sensitive redirects. JavaScript redirects are better for application behavior that depends on client-side state.
Summary
Use JavaScript redirects when client-side logic decides where the browser should go. location.href is the simplest option, location.assign() performs normal navigation with history, and location.replace() redirects without keeping the current page in browser history. For SEO, authentication, and permanent URL moves, prefer server-side redirects where possible.
