React Router Data Mode: A New Approach to Routing in React

Введение в режимы работы React Router

React Router — это стандартная библиотека для маршрутизации в приложениях на базе React. Многие воспринимают её как простой инструмент для навигации между страницами, однако возможности библиотеки выходят далеко за рамки базового роутинга. Особенно с выходом шестой версии, где был представлен новый подход к управлению данными и состоянием приложения.

Режим декларативной маршрутизации (Declarative Mode)

Декларативный режим знаком большинству разработчиков React-приложений. Он позволяет описывать маршруты прямо внутри JSX-кода с помощью компонентов вроде <BrowserRouter>, <Routes> и <Route>. Основные функции этого режима:

• Сопоставление URL-адресов с компонентами
• Навигация по приложению через компоненты (<Link>) или хуки (useNavigate)
• Определение активного состояния ссылок

Пример базовой настройки:

import { BrowserRouter } from "react-router";
ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

Этот способ прост и интуитивно понятен, но его возможностей становится недостаточно при усложнении логики загрузки данных и управления состоянием.

Режим маршрутизации на основе данных (Data Mode)

С появлением v6 React Router предложил принципиально иной подход — Data Mode. Основная идея заключается в выносе конфигурации маршрутов за пределы рендеринга React-компонентов. Это открывает новые возможности:

• Загрузка данных до отрисовки компонента (через функцию loader)
• Выполнение серверных действий (например, отправка форм) с помощью action
• Управление промежуточными состояниями загрузки и ошибок
• Использование хука useFetcher для асинхронного взаимодействия с маршрутом

Пример использования Data Mode:

import { createBrowserRouter, RouterProvider } from "react-router";
let router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    loader: loadRootData,
  },
]);
ReactDOM.createRoot(root).render(
  <RouterProvider router={router} />,
);

Такой подход делает приложение более предсказуемым, упрощает обработку состояний загрузки и ошибок, а также способствует лучшей организации кода при работе со сложными SPA.

Режим фреймворка (Framework Mode)

Для ещё большего удобства разработчики могут воспользоваться Framework Mode. Этот режим строится поверх Data Mode и добавляет интеграцию с инструментами сборки, например, Vite. Среди ключевых преимуществ:

• Типобезопасные ссылки (type-safe href)
• API модулей маршрутов (Route Module API)
• Интеллектуальное разделение кода (code splitting)
• Поддержка различных стратегий рендеринга: SPA, SSR, SSG

Пример объявления маршрутов:

import { index, route } from "@react-router/dev/routes";
export default [
  index("./home.tsx"),
  route("products/:pid", "./product.tsx"),
];

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

Особенности перехода между режимами

Каждый последующий режим не отменяет предыдущий, а дополняет его новыми возможностями. При переходе от декларативного подхода к Data Mode появляется поддержка предзагрузки данных и обработки действий, а Framework Mode предоставляет инструменты для масштабируемых enterprise-решений. Однако стоит учитывать, что увеличение функциональности сопровождается определённой потерей архитектурного контроля над структурой приложения.