React Router 7.9: Middleware без боли

React Router давно стал стандартом для маршрутизации в мире React. Но версия 7.9 принесла то, чего многие ждали годами — Middleware API. Теперь можно встроить проверки доступа, предзагрузку данных и другие "прослойки" прямо в маршруты, без лишних костылей.

Что такое Middleware в React Router?

Если раньше нужно было городить useEffect, контексты или оборачивать маршруты в HOC, то теперь всё решается элегантно:

• Проверки доступа (например, роль пользователя)

• Редиректы (если не авторизован — на страницу логина)

• Загрузка данных до рендера страницы

• Логирование и метрики

Middleware — это функции, которые выполняются до рендера компонента, и могут либо разрешить переход, либо его изменить.

Пример: проверка авторизации

import { createBrowserRouter, RouterProvider } from "react-router";
import App from "./App";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";

const requireAuth = async ({ context, next }) => {
  if (!context.user) {
    return Response.redirect("/login");
  }
  return next();
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
        middleware: [requireAuth]
      },
      {
        path: "login",
        element: <Login />
      }
    ]
  }
]);

export default function Root() {
  return <RouterProvider router={router} />;
}
  

Теперь защита маршрутов встроена в сам роутер — не нужно городить велосипеды.

Предзагрузка данных до рендера

const preloadUser = async ({ next }) => {
  const user = await fetch("/api/me").then(r => r.json());
  return next({ context: { user } });
};

const router = createBrowserRouter([
  {
    path: "/profile",
    element: <Profile />,
    middleware: [preloadUser]
  }
]);
  

Теперь в компоненте Profile данные будут доступны сразу, без мигалки "Загрузка...".

Сравнение с прежними подходами

1. HOC (Higher-Order Components)

function withAuth(Component) {
  return function Wrapped(props) {
    const user = useUser();
    if (!user) return <Navigate to="/login" />;
    return <Component {...props} />;
  }
}
  

❌ Минусы: дублирование кода, сложнее управлять потоками данных, вложенность компонентов растёт.

2. useEffect + Navigate

function Dashboard() {
  const user = useUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (!user) navigate("/login");
  }, [user]);

  return <div>Dashboard</div>;
}
  

❌ Минусы: сперва компонент монтируется, потом идёт редирект — пользователи видят "мигание".

3. Middleware API (новый подход)

✅ Всё в маршруте, без "мигания", читаемый и централизованный код.

Почему это круто?

• Чище код — маршруты становятся единой точкой для логики доступа и загрузки.

• Быстрее UX — предзагрузка данных до рендера.

• Гибкость — можно писать свои middleware под любые нужды (логирование, аналитика, фича-флаги).

Но! Middleware работает асинхронно, поэтому при большом количестве проверок стоит думать о производительности и кешировать результаты.

React Router 7.9 сделал то, чего от него ждали: превратил маршрутизацию в центральное место управления доступом и данными. Middleware API открывает путь к более предсказуемым и аккуратным приложениям.

В Кодике мы делаем обучение программированию простым и понятным: курсы по Go, JavaScript, Python и другим технологиям — всё в одном приложении.

А ещё у нас есть уютный Telegram-канал, где мы обсуждаем свежие новости из мира разработки, делимся инсайтами и разбираем новые фичи вместе. Присоединяйся, чтобы учиться и расти в IT с единомышленниками!