Redirecting a user to a new page is one of the most common tasks in web development — after a form submission, following a login, or simply guiding someone to a different section of your site. JavaScript handles this natively through the window.location object, and jQuery doesn’t add new redirect methods of its own — it just lets you trigger those same JavaScript methods through its event handling. Here’s how to do it correctly, including the details that actually matter for user experience and SEO.
The Basic Redirect: window.location.href
The most common and straightforward way to redirect is setting the href property of the window.location object:
window.location.href = "https://www.example.com";
This works similarly to a user clicking a link — it navigates to the new URL and adds the new page to the browser’s history stack, so the user can still click “Back” to return to the original page. This is the right choice for typical navigation where preserving browser history is useful or expected.
Preventing a Return to the Previous Page: window.location.replace()
Sometimes you specifically don’t want users navigating back to where they came from — after a successful login, for example, or when redirecting away from a page that’s no longer valid. For that, use replace():
window.location.replace("https://www.example.com");
Unlike href, this method removes the current page from the browser’s history entirely rather than adding to it, so clicking “Back” won’t return the user to the original page.
An Explicit Alternative: window.location.assign()
window.location.assign() behaves almost identically to setting href directly, adding the new URL to the browser’s history stack while still allowing normal back-button navigation:
window.location.assign("https://www.example.com");
Functionally it’s nearly interchangeable with setting href, but some developers prefer it for readability, since the method name makes the intent explicit.
Redirecting to a New Tab or Window
If you want to open the destination in a new tab rather than navigating away from the current page, use window.open() instead:
window.open("https://www.example.com", "_blank");
The "_blank" parameter tells the browser to open the URL in a new window or tab, leaving the current page untouched.
Adding a Delay Before Redirecting
It’s often useful to show a brief confirmation message before redirecting a user, rather than navigating away instantly. Combine setTimeout() with any of the methods above:
setTimeout(function() {
window.location.href = "https://www.example.com";
}, 3000);
This delays the redirect by 3000 milliseconds (3 seconds), giving the user time to read a message like “Your order is confirmed! Redirecting shortly…” before the page navigates away.
Using jQuery to Trigger a Redirect
Since jQuery doesn’t introduce its own redirect methods, using it here just means wrapping the same JavaScript calls inside jQuery’s event handlers — for example, triggering a redirect on a button click or after a form submits:
$(document).ready(function() {
$("button.redirect-btn").click(function() {
window.location.href = "https://www.example.com";
});
});
Or after a form submission, where you’d typically want to prevent the default form behavior first:
$("form#contact-form").submit(function(e) {
e.preventDefault();
window.location.href = "/thank-you";
});
Redirecting Based on Conditions
A common real-world pattern is conditionally redirecting users based on something like login status:
const userToken = localStorage.getItem("userToken");
if (userToken) {
window.location.href = "/dashboard";
} else {
window.location.href = "/login";
}
This pattern shows up frequently for authentication flows — sending logged-in users straight to a dashboard while redirecting everyone else to a login page.
Best Practices Worth Following
A few habits help keep redirects reliable and user-friendly:
- Avoid redirect loops. Carefully check your conditional logic so users don’t get trapped bouncing between two pages — this also hurts SEO significantly.
- Provide a fallback for JavaScript failures. Since some browsers or extensions can block JavaScript execution, consider pairing critical redirects with a server-side fallback or a visible link users can click manually.
- Be aware of caching behavior.
window.location.href can sometimes load a page from the browser’s cache rather than fetching a fresh version from the server — worth keeping in mind if you’re redirecting to a page that changes frequently.
- Show users what’s happening. For delayed redirects, always display a brief message explaining that a redirect is about to happen, rather than letting the page silently change out from under them.
When to Consider a Framework Instead
For small sites and simple interactions, jQuery and plain JavaScript redirects handle the job perfectly well. But for large-scale applications with complex routing, state management, or heavy client-side interactivity, frameworks like React, Angular, or Vue.js generally offer better performance and more robust tools for managing navigation, so it’s worth considering one of those if your redirect logic is becoming genuinely complex.
Join The Discussion
Which redirect method do you reach for most often in your own projects, and have you run into any tricky edge cases — caching issues, redirect loops, or browser compatibility quirks? Share what’s worked well for you, or a bug you had to track down related to page redirection. If you’re working through a specific redirect scenario right now, feel free to ask — there’s a good chance someone here has solved a similar problem.
