Redirects in React Router

In React applications, Redirects are used to navigate users to a different route programmatically, usually when a certain condition is met (such as after login or when a user tries to access a restricted route). React Router provides a way to handle these scenarios using the Redirect component in React Router v5 and the Navigate component in React Router v6.

1. Redirects in React Router v5

In React Router v5, the Redirect component is used to perform redirects when the route conditions are met. You can use this component inside any route or component to redirect the user to a different path.

Basic Example of Redirect in React Router v5

import React from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function Login() {
  return <h2>Login Page</h2>;
}

function Protected() {
  return <h2>Protected Content (Logged In)</h2>;
}

function App() {
  const isLoggedIn = false; // Example condition
  
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/login" component={Login} />
        
        {/* Conditional redirect if the user is not logged in */}
        <Route path="/protected">
          {isLoggedIn ? <Protected /> : <Redirect to="/login" />}
        </Route>
        
        {/* Default route */}
        <Redirect from="/" to="/home" />
      </Switch>
    </Router>
  );
}

export default App;

In this example:

• If isLoggedIn is false, the user is redirected to the /login page when trying to access the /protected route.
• The Redirect component will automatically redirect the user to /home if they visit the root path /.

2. Redirects in React Router v6

In React Router v6, the Redirect component has been replaced with the Navigate component. The Navigate component is used to perform redirects in a declarative way.

Basic Example of Navigate in React Router v6

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function Login() {
  return <h2>Login Page</h2>;
}

function Protected() {
  return <h2>Protected Content (Logged In)</h2>;
}

function App() {
  const isLoggedIn = false; // Example condition
  
  return (
    <Router>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/login" element={<Login />} />
        
        {/* Conditional redirect if the user is not logged in */}
        <Route path="/protected" element={isLoggedIn ? <Protected /> : <Navigate to="/login" />} />
        
        {/* Default redirect */}
        <Route path="/" element={<Navigate to="/home" />} />
      </Routes>
    </Router>
  );
}

export default App;

In this example:

• The Navigate component is used to redirect the user to /login if they are not logged in and try to access /protected.
• If the user navigates to /, they are redirected to /home.

3. Redirect After Form Submission or Login

One common use case for redirects is when a user submits a form (like a login form), and you want to redirect them to a different page after a successful submission.

Example: Redirect After Login

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

function Login() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    // Simulate successful login
    setIsLoggedIn(true);
  };

  if (isLoggedIn) {
    return <Navigate to="/protected" />;
  }

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

function Protected() {
  return <h2>Protected Content (Logged In)</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/protected" element={<Protected />} />
      </Routes>
    </Router>
  );
}

export default App;

In this example:

• After clicking the “Login” button, the user is redirected to /protected automatically after the login action.

4. Redirect Based on User Roles

You can also use redirects based on user roles or permissions. For example, if a user tries to access a page that requires admin privileges, you can check their role and redirect them to a “Not Authorized” page or back to the homepage.

Example: Role-Based Redirects

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

function AdminPage() {
  return <h2>Admin Dashboard</h2>;
}

function Home() {
  return <h2>Home Page</h2>;
}

function App() {
  const userRole = 'user'; // Example condition (can be 'admin' or 'user')

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        
        {/* Redirect non-admin users to home page */}
        <Route path="/admin" element={userRole === 'admin' ? <AdminPage /> : <Navigate to="/" />} />
      </Routes>
    </Router>
  );
}

export default App;

In this example:

• If the userRole is 'user', they will be redirected to the home page when trying to access /admin.

• React Router v5: Use the <Redirect /> component.
• React Router v6: Use the <Navigate /> component.
• Common Use Cases: Redirect after login, redirect based on user roles, redirect to a default route, etc.

---