React Router — настройка и лучшие практики

09 Jan 2026 • 6 min read • Frontend • Обновлено 09 Jan 2026

TL;DR

React Router — это библиотека для маршрутизации в одностраничных приложениях на React. В статье показаны установка, базовая настройка, вложенные маршруты, работа с Link, распространённые ошибки и рекомендации по архитектуре маршрутов.

Ноутбук с экраном, показывающим общий шаблон WordPress

Что такое SPA и зачем нужен маршрутизатор

Single Page Application (SPA) — это веб-сайт или веб‑приложение, которое динамически перезаписывает содержимое одной HTML‑страницы, получая данные с сервера без полной перезагрузки страницы. В React‑приложении компоненты получают данные и рендерят их внутри единого HTML‑файла проекта.

React Router помогает организовать переходы между компонентами и отображать нужные компоненты в той же HTML‑странице. Библиотека управляет URL, историей браузера и позволяет создавать вложенные, ленивые и защищённые маршруты.

Определение терминов (1 строка каждое)

SPA: одностраничное приложение — приложение, где навигация происходит без перезагрузки страницы.
Route: правило, связывающее путь URL с компонентом, который нужно отрисовать.
Link: компонент для переходов между маршрутами без перезагрузки.

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

Установка через npm (в каталоге проекта):

npm i react-router-dom

Установка через Yarn (версия v6):

yarn add react-router-dom@6

Примечание: в большинстве современных проектов используйте версию 6 и выше — API отличается от версии 5 (например, Switch заменён на Routes).

Базовая настройка Router

Добавьте BrowserRouter в корневой файл (обычно index.js), чтобы предоставить доступ к маршрутизации всем компонентам приложения:

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 браузера. Для корректной работы прямых URL запросов на сервере нужно настроить отдачу index.html для всех путей (см. раздел «Развёртывание и серверная конфигурация»).

Создание маршрутов в компоненте App

Пример простейшей настройки маршрутов с тремя страницами:

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;

Ключевые моменты:

Компонент Routes — контейнер для Route.
Каждый Route принимает path и element.
Путь ‘/‘ обычно соответствует корневой странице.

Работа с компонентом Link

Link — это компонент React Router для навигации без перезагрузки страницы. Он похож на тег , но использует атрибут to вместо href:

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

Советы по Link:

Для активных ссылок используйте NavLink — он даёт класс активной ссылки по совпадению пути.
Для программной навигации применяйте хук useNavigate().

Вложенные маршруты: зачем и как

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

Пример нелогоичной, но рабочего вида (несколько маршрутов с общей частью /article):

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;

Пояснения:

Родительский Route имеет только path, а дочерние Route описаны внутри него.
Route с index — это маршрут по умолчанию для родителя (одинаково с переходом на /article).

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

Символы /* означают, что React Router будет сопоставлять любые дочерние пути, начинающиеся с /article.

Когда вложенные маршруты не подходят

Если страницы логически независимы и не делят общую часть UI, вложения добавят лишней сложности.
Если требуется разделение кода (code splitting) по каждой странице, лучше комбинировать lazy() и отдельные маршруты.

Альтернативы BrowserRouter и когда их использовать

HashRouter — полезен при статических хостингах без настройки сервера: URL содержит #, например /#/page. Хорош для GitHub Pages.
MemoryRouter — хранит историю в памяти (используется в тестах или внутри embedded приложений).
StaticRouter — применяется на сервере для серверного рендеринга.

Выбор зависит от развёртывания и требований к SEO/History API.

Важно: для SEO на публичных сайтах рассмотрите Server Side Rendering (SSR) или статическую генерацию (SSG), потому что SPA с чистым BrowserRouter без серверной отдачи контента может плохо индексироваться.