React Router V6 — Упрощенные защищенные маршруты

React Router v6 — отличная библиотека для управления навигацией и маршрутизацией в приложениях React. В последней версии React Router v6 представлен более простой и интуитивно понятный способ управления защищенными маршрутами, то есть маршрутами, требующими аутентификации пользователя.

Создание защищенных маршрутов с помощью React Router v6 теперь очень просто. Давайте рассмотрим, как добиться этого с помощью вложенных маршрутов и компонентов макета.

Шаг 1. Настройка маршрутов приложений

Теперь давайте создадим компонент AppRoutes, который содержит как общедоступные, так и защищенные маршруты. Компонент ProtectedRoute является здесь центральным, служащим базой для всех маршрутов в пределах компонента защищенного маршрута, такого как «/dashboard» или «/profile».

export const AppRoutes = () => {
  return (
    <Routes>
      <Route path="/sign-up" element={<SignUp />} />
      <Route path="/sign-in" element={<SignIn />} />
      <Route element={<ProtectedRoute />}>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/profile" element={<UserProfile />} />
        {/* Handle other routes */}
      </Route>
    </Routes>
  );
};

Шаг 2. Внедрение компонента защищенных маршрутов

Перед созданием компонента ProtectedRoute убедитесь, что у вас есть механизм для определения аутентификации пользователя. Если пользователь не прошел проверку подлинности, он будет перенаправлен на маршрут «/sign-in».

React Router v6 предоставляет ключевой компонент Outlet. Он позволяет легко отображать дочерние элементы маршрута в родительских маршрутах. Мы можем использовать эту функцию для загрузки вложенных элементов маршрута внутри родительского маршрута. Кроме того, мы также можем добавить компоненты макета, такие как заголовки и боковые панели, которые будут общими для всех вложенных элементов маршрута.

export const ProtectedRoute = () => {
  const navigate = useNavigate();
  const { isAuthenticated } = useAuth();
  if (!isAuthenticated) {
    navigate("/sign-in");
  }
  return (
    <Grid container direction="column" width="100%" flexWrap="nowrap">
      <DashboardHeader />
      <Grid container direction="row" flexWrap="nowrap">
        <Grid item>
          <SideBar />
        </Grid>
        <Outlet />
      </Grid>
    </Grid>
  );
};

Таким образом, React Router v6 оптимизирует реализацию защищенных маршрутов с помощью компонента выхода и вложенных маршрутов. Это гораздо более простой способ обработки защищенных маршрутов, делающий навигацию по аутентифицированным разделам вашего приложения более плавной и интуитивно понятной.