Как сделать защищённый маршрут (Protected Route) в React-приложении?

Защищённый маршрут (Protected Route) в React обычно реализуется с помощью проверки аутентификации пользователя перед отображением компонента маршрута. Если пользователь не авторизован, его перенаправляют на страницу входа или другую публичную страницу.

Пример с использованием React Router v6:

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

const ProtectedRoute = ({ isAuthenticated }) => {
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
};

// Использование в маршрутах
// <Route element={<ProtectedRoute isAuthenticated={userLoggedIn} />}>
//   <Route path="/dashboard" element={<Dashboard />} />
// </Route>

Здесь ProtectedRoute проверяет, авторизован ли пользователь (isAuthenticated). Если да — рендерит вложенные маршруты через <Outlet />, если нет — перенаправляет на страницу входа.

Таким образом, можно централизованно контролировать доступ к защищённым страницам приложения.