React Router – Redirects

Introduction

Redirects in React Router are used to automatically navigate users from one route to another. Redirects are commonly required when a page has moved, when access is restricted, after login or logout, or when handling invalid URLs.

In React Router v6, redirects are handled using the Navigate component instead of the older Redirect component from v5.

What Are Redirects in React Router?

A redirect means:

• The user tries to access one route
• React Router automatically sends them to another route

Example scenarios:

• Redirect / to /home
• Redirect unauthenticated users to /login
• Redirect after successful login
• Redirect old URLs to new URLs

Why Do We Need Redirects?

Redirects help:

• Control navigation flow
• Improve user experience
• Handle authentication logic
• Maintain backward compatibility of URLs
• Manage default and fallback routes

Redirects in React Router v6

React Router v6 introduced the Navigate component for redirection.

Important points:

• Redirect component is removed
• Navigate replaces Redirect
• Redirection is declarative and clean

Basic Redirect Example

Redirect One Route to Another

import { Routes, Route, Navigate } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/home" replace />} />
      <Route path="/home" element={<Home />} />
    </Routes>
  );
}

export default App;

Explanation:

• When user visits /, they are redirected to /home
• replace prevents adding the old route to browser history

Redirect After Login

Redirects are commonly used after successful authentication.

import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    localStorage.setItem("token", "sample-token");
    navigate("/dashboard", { replace: true });
  };

  return <button onClick={handleLogin}>Login</button>;
}

export default Login;

Explanation:

• useNavigate allows programmatic redirects
• User is redirected after login success

Redirect Unauthorized Users

Redirect users if authentication fails.

import { Navigate } from "react-router-dom";

function ProtectedRoute({ children }) {
  const isAuthenticated = localStorage.getItem("token");

  return isAuthenticated ? children : <Navigate to="/login" replace />;
}

export default ProtectedRoute;

Redirect Old URLs to New URLs

This is useful when routes change.

<Route path="/old-blog" element={<Navigate to="/blogs" replace />} />

Helps maintain user experience and SEO structure.

Redirect in Nested Routes

Redirects also work inside nested routes.

<Route path="/dashboard" element={<Dashboard />}>
  <Route index element={<Navigate to="profile" replace />} />
  <Route path="profile" element={<Profile />} />
</Route>

Explanation:

• Visiting /dashboard redirects to /dashboard/profile

replace vs without replace

Recommended: use replace for redirects.

Common Mistakes with Redirects

• Using Redirect component in v6
• Forgetting replace flag
• Redirect loops due to wrong conditions
• Mixing Navigate and useNavigate incorrectly
• Redirecting before authentication state is ready

Redirects vs Navigation

Interview Questions and Answers – Redirects

1. What is a redirect in React Router?

A redirect automatically sends the user from one route to another.

2. Which component is used for redirects in React Router v6?

Navigate.

3. Why was Redirect removed in v6?

To simplify routing and make navigation more declarative.

4. What does replace do in Navigate?

It replaces the current history entry and disables back navigation.

5. How do you redirect after login?

By using useNavigate or Navigate component.

6. Can redirects be used in nested routes?

Yes, redirects work with nested routing.

7. Are redirects SEO-friendly?

Yes, when used correctly for URL restructuring.

8. What causes redirect loops?

Incorrect authentication or conditional logic.

9. When should useNavigate be preferred?

For programmatic, event-based redirects.

10. Can redirects be conditional?

Yes, redirects are often based on authentication or role checks.