Protected Routes
-
This lesson introduces protected routes in React and explains how to secure application pages based on user authentication.
Protected Routes
Authentication Concept
Protected routes restrict access based on authentication.
Example:
Dashboard (logged-in users only)
Admin panel
Implementing Protected Routes
Example:
const ProtectedRoute = ({ children }) => {
const isAuth = true;
return isAuth ? children : <Navigate to="/login" />;
};
- Usage:
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
Unauthorized users are redirected.
Common Real-World Use Cases
Login & Signup pages
Role-based access
Admin dashboards
Multi-level navigation
Final Summary
React Router enables SPA navigation
BrowserRouter wraps the app
Routes and Route define paths
Link and NavLink handle navigation
Dynamic & nested routes support scalability
Protected routes secure applications