React Router: маршрутизация в React-приложении без Next.js

Ты уже знаком с идеей вайбкодинга: говоришь ИИ-ассистенту, что тебе нужно, а он пишет код. В курсе skillmake основные уроки построены на Next.js — фреймворке, где за переходы между страницами отвечает встроенная файловая маршрутизация. Но однажды ты попросишь ИИ собрать простое приложение на чистом React, например через Vite, или возьмёшь шаблон для Telegram Mini App — и там Next.js может не понадобиться. Вместо него маршрутизацию придётся добавлять отдельной библиотекой. Самая популярная из них — React Router. Эта статья объясняет, что делает React Router, когда он нужен, а когда избыточен, и как новичку быстро проверить, что ИИ настроил его правильно.

Что такое React Router простыми словами

React Router — это библиотека для React, которая добавляет в приложение переходы между «страницами» или «экранами». Под «страницами» здесь понимаются не отдельные HTML-файлы, а разные React-компоненты, которые показываются в зависимости от текущего адреса в браузере. Когда пользователь кликает ссылку, React Router меняет URL в адресной строке и подменяет один компонент другим — без полной перезагрузки страницы.

Возьмём обычный сайт вроде интернет-магазина. В каталоге ты видишь список товаров, кликаешь на товар — и попадаешь на страницу с описанием. Если сайт сделан на обычном серверном подходе, каждый такой клик загружает новый HTML с сервера. В React-приложении всё иначе: у тебя уже загружено одно приложение, и React Router просто переключает внутри него компонент «Каталог» на компонент «Карточка товара». Браузер не перезагружает страницу, не мигает экраном, не теряет текущее состояние — например, набранный в поиске текст или открытый попап.

Важно сразу развести React Router и Next.js, потому что на курсе skillmake основные уроки проходят именно на Next.js. В Next.js маршрутизация встроена через файловую структуру: чтобы создать страницу /about, достаточно положить файл page.tsx в папку app/about/. Никакая отдельная библиотека не нужна, маршруты Next.js строит сам. React Router, напротив, используется в тех случаях, когда приложение собирается на чистом React без Next.js. Например, простой проект на Vite + React, некоторые шаблоны для Telegram Mini Apps, встраиваемые виджеты или мобильные WebView, где не хочется тащить весь Next.js ради одной маршрутизации. В этих ситуациях React Router берёт на себя роль, которую в Next.js выполняет встроенная система маршрутов.

Ещё один способ понять разницу — аналогия с квартирой. Next.js — это квартира-студия, где всё уже спроектировано: стены, двери, коридоры заложены архитектором. Ты просто расставляешь мебель по готовым комнатам. Чистый React — это пустое помещение без перегородок. React Router — это набор перегородок и дверей, которые ты устанавливаешь сам, чтобы из одного большого зала сделать прихожую, кухню и спальню. И там, и там в итоге есть комнаты, но в первом случае они даны изначально, а во втором — ты собираешь их руками.

Зачем это вообще нужно

Без маршрутизатора любое React-приложение — это одна единственная «страница». Всё, что видит пользователь, определяется одним корневым компонентом. Если тебе нужно показать разные экраны — главный, профиль, настройки, каталог — приходится вручную переключать компоненты через условный рендеринг. На псевдокоде это выглядит примерно так:

function App() {
  const [screen, setScreen] = useState('home');

  if (screen === 'home') return <Home />;
  if (screen === 'profile') return <Profile />;
  if (screen === 'settings') return <Settings />;
  return <NotFound />;
}

На двух-трёх экранах такой подход ещё работает. Но как только экранов становится больше, начинается путаница. Нужно хранить текущий экран в состоянии, прокидывать функцию переключения во все дочерние компоненты, помнить, какой экран соответствует какому URL, обрабатывать кнопки «Назад» в браузере, делиться ссылками — и всё это вручную. В какой-то момент код превращается в запутанный набор if/else, который сложно читать и поддерживать.

React Router забирает эту рутину на себя. Он говорит: «Не переключай экраны через состояние. Свяжи каждый экран с адресом, и я сам буду решать, что показывать, когда адрес меняется». Это не только упрощает код, но и возвращает привычное поведение браузера: адресная строка отражает текущее место, кнопки «Вперёд» и «Назад» работают, ссылки можно копировать и отправлять другим людям.

Кроме того, маршрутизация нужна для многих стандартных сценариев:

• Прямые ссылки. Пользователь может открыть /profile сразу, не проходя через главный экран.
• История браузера. Кнопка «Назад» возвращает на предыдущий экран, а не закрывает всё приложение.
• SEO и метаданные. Хотя React Router сам по себе не делает страницы индексируемыми, он позволяет строить структуру URL, понятную для аналитики и пользователей.
• Авторизация. Можно описать правила: если пользователь не вошёл в аккаунт, перенаправлять его с /dashboard на /login.
• Вложенные интерфейсы. Например, личный кабинет, внутри которого есть подразделы: /account/orders, /account/settings, /account/bonusy.

Коротко: без React Router чистое React-приложение остаётся одноэкранным. С React Router оно превращается в полноценное многостраничное приложение, где каждый экран имеет свой адрес.

Основные понятия коротко

React Router выглядит сложнее, чем есть на самом деле. Достаточно запомнить пять основных понятий: BrowserRouter, Routes, Route, Link и хуки useNavigate, useParams.

BrowserRouter — обёртка всего приложения

BrowserRouter — это компонент, который подключает React Router к истории браузера. Его ставят один раз, обычно в самом корне приложения, и оборачивают им всё остальное. Без этой обёртки Router не будет знать об изменениях адресной строки.

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Если приложение собирает ИИ, именно этот компонент должен появиться в main.jsx или main.tsx рядом с <App />.

Routes и Route — соответствие URL и компонента

Routes — это контейнер, внутри которого перечисляются правила. Route — одно такое правило: «если адрес совпадает с таким-то шаблоном, покажи такой-то компонент».

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Profile from './pages/Profile';
import Settings from './pages/Settings';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/profile" element={<Profile />} />
      <Route path="/settings" element={<Settings />} />
    </Routes>
  );
}

Свойство path задаёт адрес, а element — компонент, который нужно отрисовать. Когда адрес меняется, React Router проходит по списку маршрутов, находит первый подходящий и показывает его компонент.

Link — ссылка без перезагрузки

В обычном HTML для перехода между страницами используется тег <a href="/profile">. В React Router вместо него используется компонент Link:

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

function Header() {
  return (
    <nav>
      <Link to="/">Главная</Link>
      <Link to="/profile">Профиль</Link>
      <Link to="/settings">Настройки</Link>
    </nav>
  );
}

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

useNavigate — программный переход

Иногда переход должен произойти не по клику, а после какого-то события: успешной отправки формы, авторизации, завершения оплаты. Для этого используется хук useNavigate:

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

function LoginForm() {
  const navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await loginUser(email, password);
    navigate('/dashboard');
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

navigate('/dashboard') меняет адрес так же, как если бы пользователь кликнул по Link, но делает это из кода.

useParams — параметры из адреса

Когда адрес содержит переменные части, например /product/42 или /user/ivan, React Router позволяет прочитать эти значения через хук useParams:

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

function ProductPage() {
  const { id } = useParams();
  return <h1>Товар №{id}</h1>;
}

Чтобы такой маршрут заработал, его нужно описать с двоеточием:

<Route path="/product/:id" element={<ProductPage />} />

Теперь при переходе на /product/42 внутри ProductPage хук useParams() вернёт объект { id: '42' }. Это удобно для карточек товаров, профилей пользователей, статей блога и любых других страниц с динамическим содержимым.

Как устроен переход «под капотом»

Полезно понимать, что происходит, когда пользователь кликает по ссылке в React Router. В обычном сайте клик по <a href="/profile"> заставляет браузер отправить запрос на сервер, получить новую HTML-страницу и полностью её перерисовать. В React Router этот процесс перехватывается и заменяется внутренним механизмом.

Вот что происходит по шагам:

1. Пользователь кликает по компоненту <Link to="/profile">.
2. React Router перехватывает событие клика и отменяет стандартное поведение браузера.
3. React Router меняет URL в адресной строке с помощью History API — без запроса к серверу.
4. React Router сравнивает новый адрес со списком маршрутов в <Routes>.
5. Найденный маршрут говорит, какой компонент нужно отрисовать.
6. React заменяет старый компонент новым — быстро и без перезагрузки страницы.

flowchart TB
    A["Пользователь кликнул Link"] --> B["React Router перехватил клик"]
    B --> C["URL изменился без запроса к серверу"]
    C --> D["Найден подходящий Route"]
    D --> E["Отрисован нужный компонент"]

Получается, что React Router имитирует работу многостраничного сайта, но всё делает на клиенте. Сервер отдаёт приложение один раз при первой загрузке, а дальше приложение живёт самостоятельно. Это и есть суть одностраничного приложения, SPA.

Как проверить, что ИИ настроил React Router правильно

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

1. В package.json появился react-router-dom

Открой файл package.json и найди раздел dependencies. Там должна быть строка вида:

"react-router-dom": "^6.x.x"

Если её нет, библиотека не установлена, и маршрутизация работать не будет. Установить пакет можно командой:

npm install react-router-dom

2. В корне приложения есть BrowserRouter

Загляни в файл main.jsx или main.tsx. Приложение должно быть обёрнуто в <BrowserRouter>:

<BrowserRouter>
  <App />
</BrowserRouter>

Иногда вместо BrowserRouter используется HashRouter. Он тоже рабочий, но добавляет в адрес решётку: /#/profile. Для большинства современных проектов предпочтительнее BrowserRouter.

3. В App.jsx есть Routes и Route

Внутри компонента App должен быть блок <Routes>, а внутри него — перечисление маршрутов:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/profile" element={<Profile />} />
</Routes>

Если вместо этого компонент просто возвращает <Home /> или переключает экраны через useState, маршрутизации нет.

4. Ссылки в интерфейсе используют Link, а не обычный

<a href="/profile">Профиль</a>

<Link to="/profile">Профиль</Link>

React Router и Telegram Mini Apps

В курсе skillmake упоминаются Telegram Mini Apps — встроенные в Telegram веб-приложения. Многие шаблоны для Mini Apps сделаны на чистом React без Next.js, потому что Next.js с его серверным рендерингом избыточен для небольшого виджета, который живёт внутри мессенджера. В таких шаблонах React Router часто используется для переключения между экранами: приветственный экран, форма, экран результата, настройки.

В Telegram Mini App нет привычной адресной строки сверху. Пользователь не видит URL, но браузер всё равно его хранит. React Router позволяет управлять этим скрытым адресом, сохранять историю переходов и правильно реагировать на кнопку «Назад» в шапке Mini App. Без маршрутизатора кнопка «Назад» может закрыть всё приложение вместо того, чтобы вернуть на предыдущий экран.

Если планируешь делать Mini App, стоит изучить статью про Telegram Mini Apps — там разобраны особенности этой платформы и связь с вайбкодингом.

React Router vs Next.js: когда что выбирать

Поскольку на курсе skillmake основной фреймворк — Next.js, полезно иметь перед глазами сравнение.

Если ИИ предлагает тебе Next.js для лендинга или небольшого приложения — это разумный выбор. Почему Next.js часто берут за основу, разобрано в статье Лендинг на Next.js с Claude. Если же проект должен быть максимально лёгким, или ты берёшь готовый шаблон на Vite — React Router будет уместнее.

Пример небольшого приложения на React Router

Чтобы закрепить картину, представим простое приложение для учёта задач. У него три экрана: список задач, страница задачи и страница настроек.

Файл main.jsx:

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Файл App.jsx:

import { Routes, Route, Link } from 'react-router-dom';
import TaskList from './pages/TaskList';
import TaskPage from './pages/TaskPage';
import Settings from './pages/Settings';

function App() {
  return (
    <div>
      <nav>
        <Link to="/">Задачи</Link>
        <Link to="/settings">Настройки</Link>
      </nav>

      <Routes>
        <Route path="/" element={<TaskList />} />
        <Route path="/task/:id" element={<TaskPage />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </div>
  );
}

export default App;

Файл pages/TaskList.jsx:

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

function TaskList() {
  const tasks = [
    { id: 1, title: 'Настроить React Router' },
    { id: 2, title: 'Собрать первый экран' },
    { id: 3, title: 'Протестировать переходы' },
  ];

  return (
    <div>
      <h1>Мои задачи</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <Link to={`/task/${task.id}`}>{task.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TaskList;

Файл pages/TaskPage.jsx:

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

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

  return (
    <div>
      <h1>Задача #{id}</h1>
      <p>Здесь будет подробное описание задачи.</p>
      <button onClick={() => navigate(-1)}>Назад</button>
    </div>
  );
}

export default TaskPage;

В этом примере видны сразу несколько концепций: BrowserRouter, Routes, Route, Link, useParams и useNavigate. Кода немного, но он покрывает типичный сценарий переходов в небольшом приложении.

Частые ловушки и как их избежать

Помимо ошибки с обычным <a>, есть ещё несколько моментов, на которые стоит обращать внимание, когда проверяешь работу ИИ.

Путаница с вложенными маршрутами

React Router позволяет вкладывать маршруты друг в друга. Это удобно, когда есть общая обёртка, например, личный кабинет с боковым меню. Но новички иногда забывают добавить <Outlet /> — компонент, который говорит, куда вставлять дочерний маршрут. Без <Outlet /> дочерний экран просто не отобразится.

<Route path="/account" element={<AccountLayout />}>
  <Route path="orders" element={<Orders />} />
  <Route path="settings" element={<Settings />} />
</Route>

Внутри AccountLayout обязательно должен быть <Outlet />:

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

function AccountLayout() {
  return (
    <div>
      <aside>
        <Link to="/account/orders">Заказы</Link>
        <Link to="/account/settings">Настройки</Link>
      </aside>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

Неправильный порядок маршрутов

React Router выбирает первый подходящий маршрут сверху вниз. Если написать:

<Route path="/" element={<Home />} />
<Route path="/:id" element={<Detail />} />

то любой адрес будет считаться совпадающим с /:id, включая /. Порядок важен: более специфичные маршруты лучше ставить выше, а общие — ниже.

Забытый BrowserRouter

Бывает, что маршруты описаны, Link расставлены, но ничего не работает. Причина — BrowserRouter не оборачивает приложение. Без него Routes и Route просто не получают информацию об адресной строке.

Путаница между react-router и react-router-dom

В npm есть пакеты react-router и react-router-dom. Для веб-приложений устанавливают react-router-dom. Он включает в себя react-router и добавляет веб-специфичные компоненты: BrowserRouter, Link, NavLink и другие. Если в package.json только react-router, чего-то не хватает.

Связь с Node.js и экосистемой

React Router работает на клиенте, но проект собирается с помощью Node.js. Чтобы запустить приложение локально, нужен установленный Node.js и менеджер пакетов npm или yarn. Если сейчас ты только начинаешь разбираться в этой экосистеме, полезно прочитать статью Что такое Node.js. Там объясняется, зачем нужна среда выполнения JavaScript вне браузера, как она помогает собирать современные приложения и почему без неё не получится запустить типичный React-проект.

React Router — это именно клиентская библиотека. Он не требует отдельного сервера для работы маршрутов, но требует правильной настройки сервера раздачи, чтобы при прямом заходе на /profile браузер получил index.html, а не ошибку 404. Во время разработки Vite обычно делает это сам. При деплое на статику — GitHub Pages, Netlify, Vercel как статический сайт — нужно включить режим SPA, часто он называется «rewrite all routes to index.html».

Частые вопросы

Можно ли использовать React Router вместе с Next.js?

Технически можно, но обычно это не нужно. В Next.js маршрутизация уже встроена через файловую систему в папке app/. Если добавить React Router поверх, получится две системы, которые могут конфликтовать. Исключение — специфические сценарии, когда внутри Next.js нужна сложная клиентская навигация, но для новичка такие случаи редки. Лучше выбрать что-то одно: либо Next.js, либо чистый React с React Router.

Обязательно ли знать React Router, если я учусь на курсе?

Нет, не обязательно. Основной курс skillmake строится на Next.js, где маршрутизация работает иначе. Но знать про React Router полезно, потому что многие шаблоны, примеры и сторонние проекты используют именно его. Кроме того, если ты попросишь ИИ собрать простое приложение на Vite, React Router может понадобиться сам собой.

Почему при прямом заходе на /profile показывается 404?

Потому что сервер, который раздаёт собранные файлы, пытается найти файл profile.html. Такого файла нет — приложение у тебя одностраничное. Нужно настроить сервер так, чтобы при любом маршруте отдавался index.html, а уже React Router разбирался, какой компонент показать. В Vite для разработки это работает автоматически. При деплое смотри настройки хостинга.

Что лучше: BrowserRouter или HashRouter?

Для современных проектов лучше BrowserRouter. Он использует History API и даёт красивые адреса без решётки: /profile, /settings. HashRouter добавляет /#/ перед маршрутом: /#/profile. Он полезен, когда нет возможности настроить сервер на отдачу index.html, например, на очень простом статическом хостинге. Но внешний вид URL хуже, и некоторые сервисы аналитики хуже работают с хеш-адресами.

Как передать данные при переходе между экранами?

Самый простой способ — использовать параметры URL через useParams, как в примере с /task/:id. Если нужно передать что-то сложнее, можно использовать поисковую строку ?status=done и читать её через хук useSearchParams. Для временных данных между экранами иногда используют глобальное состояние — Context, Zustand, Redux — но для начала достаточно параметров адреса.

Можно ли сделать защищённый маршрут, доступный только после входа?

Да. Создаётся компонент-обёртка, который проверяет, авторизован ли пользователь. Если нет — перенаправляет на страницу входа через <Navigate to="/login" />. Это стандартная задача, и ИИ умеет её решать. Главное — чётко описать в промпте, какой маршрут должен быть защищённым.

Нужен ли React Router для мобильного приложения?

Если мобильное приложение сделано как веб-приложение в WebView — например, Telegram Mini App или PWA — то React Router может быть полезен для переключения экранов. Если приложение нативное, написанное на Swift, Kotlin или React Native, там свои системы навигации, и React Router не применяется.

Заключение + чек-лист

React Router — это библиотека, которая превращает одноэкранное React-приложение в полноценное многостраничное приложение. Она не заменяет Next.js, а решает задачу маршрутизации в тех проектах, где Next.js избыточен: простые прототипы на Vite, виджеты, Telegram Mini Apps, мобильные WebView.

Главное, что нужно запомнить:

• React Router работает в чистом React, в Next.js он не нужен.
• Основные строительные блоки: BrowserRouter, Routes, Route, Link, useNavigate, useParams.
• Внутренние переходы всегда делаются через Link, а не через обычный <a>.
• Без BrowserRouter в корне приложения маршрутизация не заработает.
• Для одноэкранных приложений React Router избыточен, он становится полезен от трёх экранов и выше.

Чек-лист «React Router настроен правильно»

• В package.json есть зависимость react-router-dom.
• Приложение обёрнуто в <BrowserRouter> в корневом файле.
• В компоненте App есть <Routes> с нужными <Route>.
• Все внутренние ссылки используют <Link to="...">.
• Переходы между экранами не перезагружают страницу.
• Кнопки «Назад» и «Вперёд» браузера работают корректно.
• Прямой заход по URL открывает нужный экран или настроена переадресация на index.html.
• Динамические маршруты вроде /product/:id читаются через useParams.
• Программные переходы делаются через useNavigate, а не через window.location.
• Вложенные маршруты используют <Outlet /> для отображения дочерних экранов.

Если хочешь пройти путь от первой настройки окружения до готового приложения, собранного вместе с ИИ — присоединяйся к практикуму skillmake. Там каждый этас разобран так, чтобы не пришлось разбираться в чёрных окнах терминала в одиночку: сначала инструменты, потом код, дизайн, тестирование и запуск.