Route Protection in React

Protect routes with authentication and authorization checks using wrapper components.

Protected route component

tsx

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

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const isAuthenticated = true; // replace with real auth check
  return isAuthenticated ? children : <Navigate to="/login" replace />;
}

Usage

tsx

<Route
  path="/admin"
  element={
    <ProtectedRoute>
      <AdminPage />
    </ProtectedRoute>
  }
/>

Authorization patterns

Role-based access (admin, editor)
Permission checks per feature
Redirect back to attempted route after login

Security note

Frontend route guards improve UX but do not replace backend authorization.

Next, we will handle forms with controlled components.