PassFront
  1. PassFront
  2. База знаний
  3. Роутинг

Зачем нужен React Router DOM?

Роутинг

react-router-dom — браузерная версия React Router: она нужна, чтобы SPA имело настоящие URL-маршруты — навигацию без перезагрузки, работающие «назад/вперёд», прямые ссылки на страницы.

Проблему, которую решает

React сам по себе роутинга не имеет: SPA живёт на одном URL, и без роутера «страницы» — это условный рендеринг, у которого нет адресов. Ломается базовое поведение веба: ссылку нельзя сохранить/отправить, F5 сбрасывает «страницу», кнопка «назад» уводит с сайта.

Что даёт react-router-dom

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="products/:id" element={<Product />} />
      <Route path="*" element={<NotFound />} />
    </Route>
  </Routes>
</BrowserRouter>
  • Синхронизация UI ↔ URL: каждый экран получает адрес; переходы через <Link>/useNavigate — без перезагрузки (History API).
  • Динамические сегменты (useParams), query (useSearchParams), вложенные layout'ы (Outlet), редиректы, 404.
  • Гарды и данные: защита маршрутов, в v6.4+ — loaders/actions.

Почему именно «-dom»

React Router разделён по платформам: ядро (@remix-run/router + react-router) платформонезависимо, react-router-dom добавляет браузерные привязки — BrowserRouter (History API), Link (тег <a>), ScrollRestoration; для мобильных приложений есть react-router-native. Так было в v6. В React Router v7 пакеты объединены: всё, включая BrowserRouter и Link, импортируется из react-router, а react-router-dom оставлен только как реэкспорт для совместимости.

Коротко для собеседования

react-router-dom даёт SPA полноценные URL: навигация без перезагрузки, параметры, вложенные маршруты, история и прямые ссылки. Суффикс -dom — браузерная привязка ядра React Router (BrowserRouter, Link); для native есть отдельный пакет.

Другие вопросы раздела