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

HOC (Higher-Order Component) — это функция, которая принимает компонент и возвращает новый компонент с расширенным функционалом. В контексте React Router HOC активно используется для управления доступом к маршрутам, передачи дополнительных пропсов или оборачивания маршрутов в определённую логику, например, авторизации или логирования.

Основная идея использования HOC для маршрутов

HOC позволяет создавать обертку вокруг компонента маршрута, чтобы внедрять повторяющуюся логику без дублирования кода. Пример типичных сценариев:

  • Проверка авторизации пользователя перед рендерингом страницы.
  • Добавление глобальных обработчиков ошибок.
  • Внедрение состояния или контекста, специфичного для маршрута.
  • Логирование посещаемых маршрутов.

Создание простого HOC для маршрутов

Рассмотрим базовый пример, который проверяет авторизацию перед доступом к компоненту:

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

const withAuth = (Component, isAuthenticated) => {
  return props => {
    if (!isAuthenticated) {
      return ;
    }
    return ;
  };
};

export default withAuth;

Пояснение ключевых моментов:

  • withAuth принимает два параметра: компонент Component и флаг isAuthenticated.
  • Возвращаемый компонент проверяет условие if (!isAuthenticated) и при необходимости перенаправляет пользователя на страницу логина через .
  • Все пропсы передаются исходному компоненту через {...props}.

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

Подключение HOC к маршрутам выполняется при определении маршрутов:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Login from "./Login";
import withAuth from "./withAuth";

const isAuthenticated = false; // пример состояния авторизации

function App() {
  return (
    
      
        } />
        
      
    
  );
}

export default App;

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

  • element маршрута может быть компонентом, обернутым HOC.
  • HOC можно использовать для нескольких маршрутов с одинаковой логикой проверки.

Динамическая передача пропсов через HOC

Иногда требуется передавать дополнительные пропсы в обернутый компонент:

const withExtraProps = (Component, extraProps) => {
  return props => ;
};

// Использование
  • extraProps добавляются к существующим пропсам маршрута.
  • HOC помогает централизованно управлять дополнительными данными, не изменяя сами компоненты страниц.

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

В проектах часто требуется применять несколько оберток:

const enhance = Component => withAuth(withExtraProps(Component, { theme: "dark" }), isAuthenticated);

Замечания:

  • Порядок HOC имеет значение: обертки накладываются сверху вниз.
  • Можно создавать утилиту для композиции HOC, чтобы не писать цепочку вручную.
const composeHOCs = (...hocs) => Component =>
  hocs.reduceRight((acc, hoc) => hoc(acc), Component);

Применение:

const enhance = composeHOCs(
  Component => withAuth(Component, isAuthenticated),
  Component => withExtraProps(Component, { theme: "dark" })
);

Интеграция с контекстом React

HOC для маршрутов удобно сочетать с React Context, например, для передачи данных о пользователе:

import { UserContext } from "./UserContext";

const withUser = Component => {
  return props => (
    
      {user => }
    
  );
};

// Использование
  • Обернутый компонент получает доступ к контексту без необходимости импортировать useContext внутри каждой страницы.
  • HOC упрощает повторное использование контекстных данных на нескольких маршрутах.

Практические советы

  • HOC лучше использовать для повторяющихся логик, которые применяются к нескольким маршрутам.
  • Для простых случаев авторизации или редиректа можно использовать Outlet и ProtectedRoute, но HOC удобен, когда нужно комбинировать несколько функциональностей.
  • Следует избегать чрезмерного вложения HOC, чтобы не ухудшать читаемость компонентов.
Оглавление