How to Redirect in JavaScript

Use JavaScript redirects when users should be sent to another page after login, form completion, expired sessions, or route guards. The cleanest default is updating window.location.href.

What you’ll build or solve

You’ll learn how to redirect in JavaScript using window.location. You’ll also know when to replace history instead of adding a new browser step.

When this approach works best

This approach is the right choice when navigation depends on logic instead of a normal HTML link click.

Common real-world scenarios include:

• Login success
• Checkout completion
• Session timeout
• Protected route checks
• Locale-based routing

This is a bad idea when a normal anchor link is enough. Use HTML links for standard navigation.

Prerequisites

You only need:

• A JavaScript file or browser console
• Basic DOM or auth flow knowledge

Step-by-step instructions

Step 1: Update the browser location

The simplest redirect uses window.location.href.

window.location.href = "/dashboard";

This changes the page and keeps the previous page in browser history.

Use replace() when users should not go back.

window.location.replace("/login");

This is especially useful after logout or expired sessions.

Delayed redirects also work well after success messages.

setTimeout(() => {
  window.location.href = "/thank-you";
}, 2000);

What to look for:

• href adds a new browser history entry
• replace() removes the back step
• Great for auth and completion flows
• Works with relative or full URLs
• Use normal links for simple navigation

Examples you can copy

Login success

window.location.href = "/app";

Logout redirect

window.location.replace("/login");

Thank-you page

setTimeout(() => {
  window.location.href = "/success";
}, 1000);

Common mistakes and how to fix them

Mistake 1: Using replace() when back navigation is needed

What the reader might do:

window.location.replace("/product");

Why it breaks: users cannot go back to the previous page.

Corrected approach:

window.location.href = "/product";

Mistake 2: Redirecting before async logic finishes

What the reader might do:

saveOrder();
window.location.href = "/success";

Why it breaks: the page may change before the request completes.

Corrected approach:

Await the save first.

await saveOrder();
window.location.href = "/success";

Mistake 3: Using JavaScript instead of a normal link

What the reader might do:

button.addEventListener("click", () => {
  window.location.href = "/pricing";
});

Why it breaks: simple navigation becomes less semantic.

Corrected approach:

Use an <a> tag when logic is unnecessary.

Troubleshooting

If the redirect happens too early, wait for async work to finish.

If the Back button does not work, switch from replace() to href.

If nothing happens, confirm the code path actually runs.

If SEO matters for static navigation, prefer normal links.

Quick recap

• Use window.location.href for redirects
• Use replace() to remove back navigation
• Great for auth and success flows
• Wait for async work first
• Use HTML links when logic is unnecessary