Middleware для маршрутов

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

Использование оберток для маршрутов (Route Wrappers)

Наиболее простой способ внедрения логики middleware — создать компонент-обертку, который проверяет условия перед рендером целевого маршрута.

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

function AuthWrapper({ children, isAuthenticated }) {
  if (!isAuthenticated) {
    return ;
  }
  return children;
}

// Использование в маршрутах

      
    
  }
/>

Ключевые моменты:

• AuthWrapper проверяет условие авторизации и перенаправляет пользователя при необходимости.
• Поддерживает любые асинхронные проверки, например загрузку данных пользователя.
• Можно создавать несколько оберток для различных задач: логирование, валидация данных, feature flags.

Middleware через хук useEffect

Для динамических проверок и асинхронных операций на уровне маршрутов можно использовать useEffect внутри компонентов-оберток:

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

function DataLoaderWrapper({ children, fetchData }) {
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();

  useEffect(() => {
    fetchData()
      .then(() => setLoading(false))
      .catch(() => navigate("/error"));
  }, [fetchData, navigate]);

  if (loading) return 
Загрузка...
;
  return children;
}

Особенности:

• Асинхронная проверка данных перед рендером компонента.
• Возможность перенаправления на страницу ошибки при неудачном запросе.
• Можно комбинировать с другими обертками для сложных цепочек middleware.

Использование хука useLocation для глобальных middleware

Для реализации глобальной логики, которая должна срабатывать при каждом изменении маршрута, используется хук useLocation в корневом компоненте приложения:

import { useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";

function RouteInterceptor({ children }) {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (location.pathname === "/admin" && !user.isAdmin) {
      navigate("/forbidden");
    }
    // Любая другая глобальная логика
  }, [location, navigate]);

  return children;
}

// В App.js

  
    
      } />
      } />
    
  

Преимущества:

• Центральная точка контроля для всех маршрутов.
• Удобно для логирования и аналитики.
• Позволяет внедрять любые условия без изменения отдельных маршрутов.

Комбинирование нескольких middleware

Middleware часто применяются цепочкой. Для этого создаются многоуровневые обертки:

function CombinedMiddleware({ children }) {
  return (
    
      
        {children}
      
    
  );
}

} />

Особенности:

• Порядок оберток имеет значение: AuthWrapper должен быть выше DataLoaderWrapper, чтобы сначала проверить авторизацию.
• Каждая обертка решает отдельную задачу, что делает код читаемым и поддерживаемым.
• Можно добавлять и другие middleware, например, для feature flags, отслеживания событий, проверки подписки.

Middleware для динамических маршрутов и ленивой загрузки

React Router поддерживает ленивую загрузку компонентов через React.lazy и Suspense. Middleware отлично интегрируется с этим подходом:

import { Suspense, lazy } from "react";
const Dashboard = lazy(() => import("./Dashboard"));


      Загрузка...