Основные компоненты React Router

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

<BrowserRouter>

Этот компонент создаёт корневой контекст маршрутизации, используя HTML5 History API (pushState, replaceState, popstate). Он должен оборачивать всё ваше приложение — обычно размещается в файле main.jsx или App.jsx.

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

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

Без <BrowserRouter> другие компоненты React Router не будут работать.

<Routes> и <Route>

Компонент <Routes> просматривает все вложенные <Route> и отображает только один — тот, чей путь (path) совпадает с текущим URL. Это центральный механизм выбора компонента.

Каждый <Route> определяет соответствие между путём и элементом:

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

Важно:

  • element принимает JSX, а не ссылку на компонент (не element={AboutPage});
  • пути без слеша в начале (about) считаются относительными; всегда используйте абсолютные пути: /about.

Пример использования:

import { Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  );
}

<Link>

Компонент <Link> заменяет стандартный HTML-тег <a>. Он позволяет переходить по маршрутам без перезагрузки страницы.

<Link to="/about">О нас</Link>

При клике на <Link> React Router обновляет URL и перерисовывает нужный компонент, но браузер не отправляет запрос на сервер.

<NavLink>

Это расширенная версия <Link>, которая автоматически добавляет CSS-класс (по умолчанию active), когда текущий URL совпадает с его to.

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

Если пользователь находится на /profile, элемент получит класс active. Это удобно для подсветки текущего пункта меню.

Можно кастомизировать имя активного класса:

<NavLink
  to="/settings"
  className={({ isActive }) => isActive ? 'nav-active' : 'nav-item'}
>
  Настройки
</NavLink>

Для ленивых

Основные компоненты образуют следующую структуру:

  1. <BrowserRouter> — окружает всё приложение;
  2. <Routes> — содержит список маршрутов;
  3. <Route> — связывает путь с компонентом;
  4. <Link> / <NavLink> — обеспечивают навигацию между маршрутами.