React Router – Protected Routes

Introduction

Protected Routes are used to restrict access to certain pages in a React application based on authentication or authorization rules. They ensure that only logged-in or authorized users can access specific routes such as dashboards, profile pages, admin panels, or premium content.

Protected routing is a core concept in real-world React applications where security and user access control are required.

What Are Protected Routes?

A Protected Route is a route that:

• Checks whether a user is authenticated
• Allows access if the condition is satisfied
• Redirects the user if the condition fails

For example:

• Logged-in users can access /dashboard
• Non-logged-in users are redirected to /login

Why Do We Need Protected Routes?

Protected Routes help:

• Secure sensitive pages
• Prevent unauthorized access
• Improve user experience
• Implement role-based access control
• Build production-ready applications

Common Use Cases

• User dashboards
• Admin panels
• Profile pages
• Subscription-based content
• Internal tools

Basic Concept Behind Protected Routes

The core idea is simple:

1. Check authentication status
2. If authenticated, render the requested component
3. If not authenticated, redirect to login page

React Router v6 uses components and hooks to implement this logic cleanly.

Example: Simple Authentication Check

Assume authentication status is stored in state or localStorage.

const isAuthenticated = true;

In real applications, this comes from:

• Context API
• Redux
• API response
• Authentication provider

Creating a Protected Route Component

Step 1: Create a ProtectedRoute Component

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

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

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

  return children;
}

export default ProtectedRoute;

Explanation:

• Checks authentication status
• Redirects unauthenticated users
• Allows access to authenticated users

Step 2: Use Protected Route in Routing

import { Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Login from "./Login";
import ProtectedRoute from "./ProtectedRoute";

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

      <Route
        path="/dashboard"
        element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        }
      />
    </Routes>
  );
}

export default App;

How Redirect Works

• Navigate component redirects programmatically
• replace prevents back navigation to protected page
• Improves security and UX

Protected Routes with Nested Routes

Protected Routes work well with nested routing.

Example

<Route
  path="/dashboard"
  element={
    <ProtectedRoute>
      <DashboardLayout />
    </ProtectedRoute>
  }
>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

All child routes are automatically protected.

Role-Based Protected Routes (Concept)

You can extend protection by checking user roles.

if (userRole !== "admin") {
  return <Navigate to="/unauthorized" />;
}

Common roles:

• Admin
• User
• Manager
• Editor

Common Mistakes in Protected Routes

• Protecting only UI but not APIs
• Storing sensitive auth data insecurely
• Forgetting replace in Navigate
• Hardcoding authentication logic
• Not handling loading state during auth check

Protected Routes vs Public Routes

Interview Questions and Answers – Protected Routes

1. What are protected routes in React?

Protected routes restrict access to pages based on authentication or authorization.

2. Why are protected routes important?

They secure sensitive pages and prevent unauthorized access.

3. How do you implement protected routes in React Router v6?

By creating a wrapper component that checks authentication and conditionally renders content.

4. Which component is used for redirection?

The Navigate component.

5. Can protected routes be nested?

Yes, nested routes can be protected using a parent route.

6. Should APIs also be protected?

Yes, frontend protection alone is not sufficient.

7. Where should authentication state be stored?

Context API, Redux, or secure storage like HTTP-only cookies.

8. Can protected routes support role-based access?

Yes, roles can be checked before rendering components.

9. What does replace do in Navigate?

It prevents users from navigating back to the restricted page.

10. Are protected routes SEO-friendly?

Protected routes are usually excluded from SEO indexing.