TL;DR

React Router — библиотека для маршрутизации в одностраничных приложениях на React. Установите пакет, оберните приложение в BrowserRouter, объявите Routes и Route, используйте Link/NavLink для навигации. Для вложенных маршрутов вынесите набор маршрутов в отдельный компонент и подключите его через путь с маской.

Важно: React Router управляет навигацией на стороне клиента. Для SEO, SSR и глубоких ссылок рассмотрите серверную поддержку или фреймворки с рендерингом на сервере.

Что такое SPA и как сюда вписывается React Router

Одностраничное приложение (SPA) — это сайт или веб‑приложение, которое динамически подгружает и перерисовывает содержимое без полной перезагрузки страницы. В React вы обычно рендерите разные компоненты в одном HTML‑файле. React Router связывает URL с компонентами, позволяя пользователю переключаться между «страницами» без перезагрузки.

Краткое определение терминов:

• SPA: веб‑приложение, где контент обновляется клиентом без полной загрузки страницы.
• BrowserRouter: маршрутизатор, использующий History API браузера.
• Route: правило, которое сопоставляет путь с React‑элементом.
• Routes: контейнер для Route (замена Switch в v6).

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

Установите пакет через npm в корне проекта:

npm i react-router-dom  

Или с помощью Yarn:

yarn add react-router-dom@6  

Настройка BrowserRouter

Откройте ваш входной файл (обычно index.js) и оберните приложение в 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(  
    
      
    
);  

Объявление маршрутов в App

Routes — это контейнер для отдельных Route. Route принимает path (путь) и element (элемент/компонент для рендера):

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 = ‘/‘ — корневой путь; когда вы заходите на корень сайта, отрисуется Home.
• element = { } — элемент, который рендерит Route.

Навигация: Link и NavLink

Компонент Link заменяет обычную ссылку . Он предотвращает полную перезагрузку и обновляет адрес в истории браузера через History API.

import { Link } from 'react-router-dom';  
  
function Home() {  
    return (  
      
  
        About page  
        Blog page  
        
This is the Home Page
  
      
  
    )  
}  
  
export default Home;  

Советы:

• NavLink полезен для подсветки активного пункта меню (активный класс или функция isActive).
• Используйте атрибут to вместо href.

Вложенные маршруты (Nested routing)

Вложенные маршруты помогают группировать схожие пути и компоненты. Сначала объявьте отдельные компоненты:

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;  

Вариант с реальным вложением:

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;  

Лучше выделить набор связанных маршрутов в отдельный компонент и подключать его через путь с подстановкой:

import { Routes, Route } from 'react-router-dom';  
import ArticleRoutes from './ArticleRoutes';  
  
function App() {  
    return (  
        
         }>  
        
    )  
}  
  
export default App;  

Здесь ‘/article/*’ означает: любая подстрока пути, начинающаяся с /article.

Полезные хуки и приёмы

• useParams — получение параметров из URL (например, :id).
• useNavigate — программная навигация (аналог history.push).
• useLocation — текущий путь и состояние навигации.

Примеры:

import { useParams, useNavigate } from 'react-router-dom';

function Article() {
  const { id } = useParams();
  const navigate = useNavigate();

  return (
    

      
Статья {id}
       navigate('/article')}>Назад к списку
    
  );
}

Лучшие практики

• Держите маршруты декларативными. Используйте компонентные наборы маршрутов, а не большое дерево в App.
• Для крупных проектов используйте code splitting (React.lazy + Suspense) на уровне маршрутов.
• Обрабатывайте 404: добавьте Route без path или с path=’*’.
• Для навигации с состоянием используйте state в Link (to={{ pathname: ‘/x’, state: { from: … } }}).

Примечание: React Router управляет навигацией на клиенте. Если ваше приложение должно индексироваться поисковыми ботами или иметь предрендеринг, подумайте о Next.js, Remix или серверной стороне.

Когда React Router может не подойти

• SEO‑чувствительные страницы без серверного рендеринга — ботам нужна готовая HTML. Решение: SSR/ISR или рендер на сервере.
• Очень простые статические сайты — может быть избыточным; подойдёт статический генератор или простые ссылки.
• Сложная логика авторизации — подумайте о защищённых маршрутах и общем управлении доступом.

Альтернативы и дополнительные опции

• HashRouter — использует хэш в URL (/#/path). Удобно, когда на сервере нет поддержки History API.
• Next.js и Remix — имеют встроенный рутинг и серверный рендеринг.
• Клиентские роутеры в микро‑фреймворках или кастомные решения для узких задач.

Миграция с React Router v5 на v6 — кратко

• Switch заменён на Routes.
• Компоненты Route больше не принимают props render/component; используйте element={}.
• Порядок маршрутов менее критичен: v6 использует алгоритм сопоставления с наибольшим соответствием.

Ментальные модели (heuristics)

• URL как адрес ресурса — думайте о каждом пути как о ресурсе, а не о представлении.
• Route = правило сопоставления (path => компонент). Routes = набор этих правил.
• BrowserRouter управляет историей браузера; HashRouter — безопасный вариант для простых хостингов.

Набор ролей: чек-листы

Разработчик:

• Установить react-router-dom.
• Обрести BrowserRouter вокруг приложения.
• Объявить Routes и Route по вложенной логике.
• Добавить useParams/useNavigate там, где нужны параметры и навигация.

DevOps/инфраструктура:

• Настроить серверную отдачу index.html для всех путей (history API fallback) или настроить редиректы.
• Убедиться, что 404 на сервере корректно перенаправляет на SPA.

QA / Тестировщик:

• Проверить навигацию назад/вперёд в браузере.
• Проверить прямые переходы по URL (глубокие ссылки).
• Проверить 404 и защищённые маршруты.

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

• Все объявленные маршруты доступны по URL и рендерят ожидаемые компоненты.
• Навигация через Link/NavLink не вызывает полной перезагрузки страницы.
• При ручном вводе URL приложение загружается и показывает корректный экран.
• Защищённые маршруты перенаправляют неавторизованных пользователей на страницу логина.

Сниппет‑шпаргалка (cheat sheet)

• Активная ссылка с NavLink:

 isActive ? 'active' : ''}>About

• Защищённый маршрут (очень упрощённо):

function PrivateRoute({ element, isAuthenticated }) {
  return isAuthenticated ? element : ;
}

• Обработка 404:

  {/* ...ваши маршруты... */}
  } />

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

• Кнопка перехода должна вызывать navigate и менять URL без перезагрузки.
• При переходе по прямой ссылке /article/1 должен отрисоваться компонент ArticleOne.
• При отсутствии совпадения пути должен показываться 404‑компонент.

Короткий глоссарий (1 строка каждого термина)

• SPA: приложение, где интерфейс обновляется динамически без полной загрузки страницы.
• BrowserRouter: браузерный маршрутизатор, использующий History API.
• Route: правило, сопоставляющее путь с React‑элементом.
• Routes: контейнер для Route в v6.
• Link/NavLink: компоненты для навигации без перезагрузки.
• useParams/useNavigate/useLocation: хуки для работы с параметрами и навигацией.

Короткая методология внедрения маршрутизации

1. Проанализируйте структуру URL и создайте карту маршрутов.
2. Установите react-router-dom и добавьте BrowserRouter в корень.
3. Объявите Routes/Route, вынесите крупные группы маршрутов в отдельные модули.
4. Добавьте code splitting по маршрутам и обработку ошибок/404.
5. Тестируйте глубокие ссылки и навигацию браузера.

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

• Если ваш сервер не настроен возвращать index.html для вложенных путей — прямые переходы по URL будут давать 404.
• Если требуются строгие требования SEO при отсутствии SSR — поисковики могут не увидеть содержимое.

Краткий вывод

React Router — гибкий и мощный инструмент для управления навигацией в SPA на React. Он прост в установке и интеграции, но требует внимания к серверной конфигурации и SEO‑требованиям. Для крупных проектов используйте модульную структуру маршрутов, код‑сплиттинг и автоматизированные тесты.

Дополнительные ресурсы: официальная документация React Router (поиск в интернете), примеры code splitting и статьи про SSR/Next.js для сценариев, где нужен рендер на сервере.