How to Create Protected Route in React: Simple Guide

To create a protected route in React, use React Router's Route component combined with a check for user authentication. Wrap the route in a component that renders the target component if authenticated or redirects to a login page if not. This ensures only authorized users can access certain pages.

Syntax

A protected route in React typically uses a wrapper component that checks if a user is authenticated before rendering the desired component. If not authenticated, it redirects to a login page.

• isAuthenticated: Boolean flag to check user login status.
• Navigate: React Router component to redirect users.
• children: The component(s) to render if authenticated.

jsx

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

function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  return children;
}

Example

This example shows a simple React app with React Router v6 where the /dashboard route is protected. If the user is not logged in, they are redirected to /login. The ProtectedRoute component handles this logic.

jsx

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

function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  return children;
}

function Dashboard() {
  return <h2>Dashboard: Welcome, authenticated user!</h2>;
}

function Login({ onLogin }) {
  return (
    <div>
      <h2>Login Page</h2>
      <button onClick={onLogin}>Log In</button>
    </div>
  );
}

export default function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const handleLogin = () => setIsAuthenticated(true);

  return (
    <Router>
      <nav>
        <Link to="/dashboard">Dashboard</Link> | <Link to="/login">Login</Link>
      </nav>
      <Routes>
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute isAuthenticated={isAuthenticated}>
              <Dashboard />
            </ProtectedRoute>
          }
        />
        <Route path="/login" element={<Login onLogin={handleLogin} />} />
        <Route path="/" element={<h2>Home Page</h2>} />
      </Routes>
    </Router>
  );
}

Output

When visiting /dashboard while not logged in, user is redirected to /login. After clicking 'Log In', user can access /dashboard and see the welcome message.

Common Pitfalls

• Not using Navigate for redirection causes the protected route to render even when unauthenticated.
• Forgetting to pass replace prop to Navigate can clutter browser history.
• Not wrapping the protected component inside the ProtectedRoute wrapper.
• Using outdated React Router versions with different APIs.

jsx

/* Wrong way: renders component even if not authenticated */
function ProtectedRouteWrong({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return <div>Please log in</div>;
  }
  return children;
}

/* Right way: redirects unauthenticated users */
import { Navigate } from 'react-router-dom';
function ProtectedRouteRight({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  return children;
}

Quick Reference

• ProtectedRoute: Wraps routes to check authentication.
• isAuthenticated: Boolean to track login status.
• Navigate: Redirects unauthenticated users.
• React Router v6: Use Routes and Route with element prop.

Key Takeaways

Use a wrapper component to check authentication before rendering protected routes.

Redirect unauthenticated users with React Router's Navigate component.

Pass the protected component as children to the wrapper for clean code.

Always use React Router v6 syntax with Routes and Route elements.

Remember to manage authentication state properly to control access.