? React Router Redirects

? Quick Overview

Redirects automatically move users from one route to another. In React Router v6+, redirects are handled using the <Navigate /> component or the useNavigate() hook.

? Key Concepts

<Navigate /> replaces the old Redirect component
useNavigate() allows programmatic navigation
replace avoids adding history entries
state passes data between routes

? Redirect Using <Navigate />

? View Code Example

// Redirect unauthenticated users using Navigate
import React from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import Home from "./pages/Home";
import Dashboard from "./pages/Dashboard";

function App() {
  const isLoggedIn = false;

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route 
        path="/dashboard" 
        element={isLoggedIn ? <Dashboard /> : <Navigate to="/" replace />} 
      />
    </Routes>
  );
}

export default App;

If isLoggedIn is false, users are redirected to the home page.

? Redirect with useNavigate()

? View Code Example

// Programmatic redirect after login
import React from "react";
import { useNavigate } from "react-router-dom";

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

  const handleLogin = () => {
    // Perform login logic here...
    navigate("/dashboard");
  };

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

export default Login;

This approach is useful for redirects triggered by events or logic.

♻️ Redirect Old Routes

? View Code Example

// Redirect legacy routes to new paths
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/old-about" element={<Navigate to="/about" replace />} />
  <Route path="/about" element={<About />} />
</Routes>

? Redirect with State

? View Code Example

// Passing state during redirect
<Navigate to="/login" state={{ from: "/dashboard" }} replace />

// Accessing state after redirect
import { useLocation } from "react-router-dom";
const location = useLocation();
console.log(location.state.from);

? Interactive Simulator

Test the logic of a protected route redirect below. Try accessing the Dashboard while logged out.

? https://myapp.com/home

Auth: Logged Out

? Home Page

Welcome! This page is public.

? Tips & Best Practices

Use <Navigate /> for route-level redirects
Use useNavigate() for action-based redirects
Always use replace for auth redirects
Use state to preserve navigation context

? Try It Yourself

Protect the dashboard route using authentication
Redirect after successful form submission
Create a legacy URL redirect
Store and retrieve redirect state