Что такое React Router (одна строка)

React Router — библиотека для управления маршрутами в одностраничных приложениях (SPA) на React: она отображает компоненты в зависимости от URL без полной перезагрузки страницы.

Основные понятия (глоссарий в одну строку)

• BrowserRouter — поставщик истории браузера; оборачивает приложение.
• Routes — контейнер для набора Route.
• Route — описание соответствия пути и компонента.
• Link — компонент для навигации вместо .
• index route — маршрут по умолчанию внутри вложенной группы.

Как установить React Router

Важно: используйте версию 6.x для актуальной синтаксической модели (Routes/element и пр.).

Через npm:

npm install react-router-dom

Через Yarn:

yarn add react-router-dom@6

Примечание: в примерах ниже используется синтаксис v6.

Быстрый пример: подключение Router в index.js

Откройте корневой файл (обычно index.js или main.jsx) и оберните корневой компонент в BrowserRouter.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  
    
  
);

Важно: BrowserRouter использует history API браузера. Для серверного рендеринга или нестандартных окружений применяйте другие провайдеры (StaticRouter, MemoryRouter).

Определение базовых маршрутов в App

Пример простого App с тремя маршрутами — Home, About, Blog:

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Blog from './Blog';

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

export default App;

Пояснения:

• path — путь в адресной строке.
• element — React-элемент, который будет отрендерен.
• Обратите внимание: порядок маршрутов не влияет на выбор в v6, Routes выбирает наиболее точное совпадение.

Навигация: компонент Link

Link заменяет обычный чтобы избежать полной перезагрузки страницы.

import { Link } from 'react-router-dom';

function Home() {
  return (
    

      О нас
      Блог
      
Это главная страница
    
  );
}

export default Home;

Важно: используйте NavLink, если нужно подсвечивать активный маршрут (он добавляет класс “active” или позволяет задать стиль).

Вложенные маршруты: когда и как использовать

Вложенные маршруты помогают моделировать иерархию страниц (например, /article, /article/new, /article/1) и переиспользовать общую оболочку (layout).

Пример простого вложения (вариант 1 — вложение через родительский Route без element):

import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';

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

export default App;

Обратите внимание на относительные пути: внутри родительского Route дочерние пути указываются без ведущего слэша (‘new’, ‘1’). Это предотвращает дублирование пути и делает маршруты переносимыми.

Вложение с общим layout (вариант 2 — родительский элемент):

import { Outlet } from 'react-router-dom';

function ArticlesLayout() {
  return (
    

      
Статьи
      
    
  );
}

// В маршрутах
}>
  } />
  } />
  } />

Здесь Outlet рендерит дочерний маршрут внутри общего layout.

Маршрутизация с параметрами и динамические сегменты

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

} />

// В компоненте Article
import { useParams } from 'react-router-dom';

function Article() {
  const { id } = useParams();
  // получить данные по id
}

Примеры полезных паттернов (cheat sheet)

• Index route: } /> — рендерится при точном совпадении родительского пути.
• Wildcard: path=’*’ — «ловит» все неопределённые маршруты (404).
• Redirect (замена в v6): — для перенаправления.
• Protected routes: создайте компонент-обёртку, который проверяет авторизацию и рендерит Outlet или Navigate.

Пример ProtectedRoute:

import { Navigate, Outlet } from 'react-router-dom';

function ProtectedRoute({ isAuth }) {
  return isAuth ?  : ;
}

// Использование
}>
  } />

Тесты и критерии приёмки

Критерии приёмки:

• При загрузке / отображается компонент Home.
• Переход по Link меняет URL без полной перезагрузки страницы.
• Вложенный маршрут /article/new рендерит NewArticle внутри общего layout.
• Неопределённый путь показывает кастомную страницу 404.

Минимальные тесты:

• Unit: Route-компоненты корректно рендерят ожидаемый JSX при заданном URL (используйте MemoryRouter в тестах).
• E2E: переходы между страницами работают (нет полной перезагрузки, ожидается контент компонента).

Когда эта схема не работает (примеры отказов)

• Сервер не настроен на возврат index.html для всех путей — при перезагрузке вложенного URL появится 404. Решение: настройте сервер (nginx, Apache, Vercel/Netlify) либо используйте HashRouter.
• Не тот провайдер Router (например, BrowserRouter на сервере) — используйте StaticRouter для SSR.
• Компоненты выполняют побочные действия в рендере — маршрутизация может вести к неожиданным запросам. Поместите побочки в useEffect.

Важно: для публичной хостинг-платформы убедитесь, что конфигурация перезаписи URL корректна.

Практические советы и лучшие практики

• Используйте относительные пути в дочерних маршрутах (без ведущего /).
• Централизуйте маршрутную логику в отдельном файле routes.js или компоненте RoutesTree.
• Разделяйте крупные участки интерфейса на ленивые загрузки (React.lazy + Suspense) для снижения начальной загрузки.
• Переходы по навигации должны обрабатываться через Link/NavLink, а не через window.location, чтобы сохранить поведение SPA.
• Для SEO: при необходимости использовать SSR или pre-rendering; чистый BrowserRouter не решит проблему индексации.

Чек-листы по ролям

Разработчик (при внедрении маршрутизации):

• Установлен react-router-dom нужной версии.
• Router обёрнут вокруг корня приложения.
• Определены Routes и Route по структуре приложения.
• Навигация реализована через Link или NavLink.
• Вложенные маршруты используют Outlet и относительные пути.
• Отсутствуют лишние перезагрузки страницы.

Ревьювер кода:

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

Операции/DevOps:

• Сервер настроен на возврат index.html для всех URL (history fallback).
• Конфигурация прокси/ rewrites для API и SPA разделена.

Decision flow (Mermaid)

flowchart TD
  A[Начать: Нужно ли SSR?] -->|Да| B[Использовать SSR + StaticRouter]
  A -->|Нет| C[Использовать BrowserRouter]
  C --> D{Есть вложенные маршруты?}
  D -->|Да| E[Использовать Outlet и относительные пути]
  D -->|Нет| F[Обычные Routes/Route]
  B --> G[Настроить сервер для SSR]
  E --> H[Проверить перезапись URL на сервере]
  F --> H

Сценарии развёртывания и типичные ошибки

• Nginx: добавить try_files $uri /index.html; в конфигурацию для корректной работы BrowserRouter.
• Netlify/Vercel: настроить правило перезаписи (rewrites) на index.html.
• Если нельзя изменить сервер — используйте HashRouter (адреса содержат #), это работает без server-side rewrite.

Примеры миграции с v5 на v6 (кратко)

• Switch заменён на Routes.
• component в Route заменён на element с React-элементом.
• useHistory заменён на useNavigate.
• exact больше не требуется (путь выбирается по алгоритму совпадения).

Безопасность и приватность

React Router сам по себе не обрабатывает входящие данные, но будьте внимательны с параметрами маршрута (useParams) — проверяйте и валидируйте идентификаторы перед использованием в запросах.

Краткая проверка производительности

• Lazy loading для больших страниц уменьшает начальный payload.
• Минимизируйте ререндеринг обёрток layout — мемоизируйте статические части интерфейса.

Короткая памятка (cheat-sheet)

• Подключение: BrowserRouter в index.js
• Основные элементы: Routes, Route, Link, NavLink, Outlet, useParams, useNavigate
• Redirect:
• Wildcard: } />

Краткая сводка

React Router предоставляет гибкую модель маршрутизации для SPA: от простых маршрутов до вложенной архитектуры с layout и защитой маршрутов. Внимательно настраивайте серверную часть для поддержки history API и используйте относительные пути и Outlet для прозрачной модульности.

Важно: протестируйте переходы в среде, приближённой к продакшену (тот же сервер/хостинг), чтобы избежать проблем с 404 при перезагрузке вложенных URL.

Ресурсы и дальнейшие темы для изучения

• Официальная документация React Router (последняя версия) — для подробных вариантов API.
• Техники SSR/SSG при необходимости SEO.