Основы React Router: BrowserRouter, маршруты, пояснение концепций Route и Link

Большинству приложений на React вскоре требуется несколько экранов, таких как Главная, О нас, Продукты и Контакты. Сам React не имеет представления о URL, поэтому сопоставление адресов с экранами осуществляется с помощью библиотеки, обычно React Router. Четыре её компонента покрывают большинство случаев маршрутизации в повседневной практике: <BrowserRouter>, <Routes>, <Route> и <Link>. Как только вы поймёте, что делает каждый из них и как они взаимодействуют, вы сможете создать многопáginaное приложение в формате одной страницы и объяснить это на собеседовании.

BrowserRouter связывает React с URL

<BrowserRouter> — это сам маршрутизатор. Он обеспечивает клиентскую маршрутизацию с помощью API истории браузера, поддерживая синхронизацию отображаемого интерфейса с строкой адреса без необходимости запрашивать у сервера новый документ.

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

/
/about
/products
/contact

Настройка подразумевает обертку дерева компонентов; всё, что требует маршрутизации, должно находиться внутри неё:

import { BrowserRouter } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      {/* Application routes */}
    </BrowserRouter>
  );
}

Обычно его размещают один раз, у корня. Одно практическое последствие: поскольку такие пути, как /about, являются реальными URL, ваш хост должен подавать один и тот же index.html для всех из них, иначе обновление страницы по адресу /about приведёт к ошибке 404 от сервера.

Routes определяет, что отображать

<Routes> — это контейнер для определений маршрутов. При каждом изменении местоположения он сравнивает текущий URL со своими дочерними элементами и отображает соответствующий. Используйте его в тех случаях, когда решение о том, какой экран отобразить, должен принимать React Router, а не ручные условия:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/products" element={<Products />} />
</Routes>

Здесь элемент <Routes> обрабатывает все три пути. Он выбирает наилучшее совпадение, а не первое из перечисленных, поэтому вам редко нужно беспокоиться о порядке.

Маппинг маршрутов: один путь — один элемент

Каждый элемент <Route> связывает URL-путь с компонентом, который должен отобразиться, подобно записи в таблице поиска:

/about → About component
/products → Products component

Добавьте по одному такому элементу для каждого URL, который должен отобразить что-то конкретное. Основными атрибутами являются path и element:

<Route
  path="/about"
  element={<About />}
/>

С таким определением при посещении этого адреса:

/about

React Router будет отображать следующее:

<About />

Обратите внимание, что атрибут element принимает уже отрендеренный элемент (<About />), а не ссылку на компонент, поэтому вы можете напрямую передавать атрибуты. Несколько маршрутов выглядят так:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

Если ни один путь не совпадает, в этом блоке ничего не отображается; обычно для показа экрана «не найдено» используется универсальный маршрут path="*".

Навигация по ссылке без перезагрузки

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

import { Link } from "react-router-dom";
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

При нажатии на Об организации обновляется URL, элемент переоценивается, и экран «Об организации» отображается без перезагрузки браузера, благодаря чему сохраняется общий макет и состояние в памяти. Для внешних сайтов по-прежнему подходит обычный тег .

Минимальная полноценная конфигурация (с разделами Home, About и Contact, определенными в другом месте):

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Ссылки и блок <Routes> являются сестринскими элементами внутри <BrowserRouter>: навигация остается видимой на каждой странице, в то время как только область <Routes> меняет содержимое. Кратко о иерархии:

BrowserRouter
      ↓
    Routes
      ↓
    Route
      ↓
  Component

<Link> располагается рядом с этой цепочкой и служит элементом управления, на который пользователи нажимают для изменения URL. В примерах используется импорт из библиотеки react-router-dom; в новых основных версиях также предоставляются эти API из пакета react-router, поэтому проверьте документацию для вашей версии.

Вопросы на собеседовании

• Что такое <BrowserRouter>? Это маршрутизатор, который обеспечивает клиентскую маршрутизацию и синхронизирует интерфейс с URL браузера.

Основные выводы

• <BrowserRouter> обеспечивает маршрутизацию в корневой точке.
• <Routes> управляет маршрутами и отображает соответствующий контент.
• <Route> связывает URL с компонентом.
• <Link> позволяет переходить между маршрутами без перезагрузки страницы.

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

Связанные материалы

• Создание умственной модели для React: согласование данных, состояние и хуки — Ознакомьтесь с логикой основных концепций React — согласования данных, компонентов, свойств, состояния и хуков — чтобы развить интуицию в работе с этой библиотекой вместо запоминания API.
• React 19.2: разбор компонента Activity, хука useEffectEvent и функции статической отрисовки — Узнайте, как новый компонент Activity, хук useEffectEvent и возможность частичной статической отрисовки в React 19.2 устраняют скрытые проблемы с производительностью в современных интерфейсах.