React Router DOM — навигация в React приложении

React Router добавляет навигацию в React-приложение: страницы, ссылки, параметры URL, вложенные маршруты и программные переходы. В новых версиях библиотека развивает несколько режимов, но для обычного SPA новичку достаточно декларативного роутинга.

Базовая настройка маршрутов

Начинать роутинг лучше с маленькой схемы: BrowserRouter, несколько Route и переходы через Link. Так проще понять, что React Router меняет компоненты на странице без полной перезагрузки браузера.

Пока маршрутов мало, схема кажется очевидной. Но именно на этом этапе важно привыкнуть не использовать обычные a-ссылки для внутренней навигации и не перезагружать приложение без необходимости.

Установка

В React Router v7 для декларативного режима официальная установка идёт через пакет react-router. В старых уроках часто встречается react-router-dom — это нормальный след старых версий, но новый код лучше сверять с документацией.

npm i react-router

Подключить BrowserRouter

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

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

Создать маршруты

import { Routes, Route, Link } from 'react-router';

function Home() {
  return <h1>Главная</h1>;
}

function About() {
  return <h1>О проекте</h1>;
}

function App() {
  return (
    <>
      <nav>
        <Link to="/">Главная</Link>
        <Link to="/about">О проекте</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </>
  );
}

Практические возможности роутинга

После базовых маршрутов появляются реальные задачи: параметры URL, переход из кода, 404-страница, layout и query string. Эти детали превращают набор страниц в нормальное приложение с понятной навигацией.

Эти возможности нужны почти в любом приложении сложнее одной страницы. Профиль пользователя, фильтры каталога, общий layout и страница ошибки — всё это строится вокруг правильной схемы маршрутов.

Параметры URL

import { useParams } from 'react-router';

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

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

Переход из кода

import { useNavigate } from 'react-router';

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

  function handleSubmit(event) {
    event.preventDefault();
    navigate('/profile');
  }

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

404 страница

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />
</Routes>

Важный момент при деплое

Если у вас SPA с React Router, сервер должен отдавать index.html для внутренних путей. Иначе прямая ссылка /about может дать 404. Для Nginx используется try_files $uri $uri/ /index.html.

Локально эта проблема часто не видна, потому что dev-сервер уже умеет отдавать приложение на любой маршрут. На production-сервере такое поведение нужно настроить явно, иначе пользователь получит ошибку при обновлении страницы.

Layout-маршрут

В реальном приложении страницы часто имеют общий layout: шапку, меню, контейнер. В React Router для этого используют Outlet.

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

function Layout() {
  return (
    <>
      <header>
        <Link to="/">Главная</Link>
        <Link to="/users">Пользователи</Link>
      </header>
      <main>
        <Outlet />
      </main>
    </>
  );
}

function App() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<Home />} />
        <Route path="/users" element={<Users />} />
      </Route>
    </Routes>
  );
}

Поисковые параметры

Для фильтров и сортировки удобно хранить состояние в URL. Тогда пользователь может отправить ссылку на уже отфильтрованную страницу.

import { useSearchParams } from 'react-router';

function ProductsFilter() {
  const [params, setParams] = useSearchParams();
  const query = params.get('q') || '';

  return (
    <input
      value={query}
      onChange={e => setParams({ q: e.target.value })}
      placeholder="Поиск"
    />
  );
}

Что запомнить

Route описывает, какой компонент показать. Link создаёт переход без перезагрузки. useParams читает динамические части URL. useNavigate переводит пользователя из кода. Outlet показывает вложенную страницу внутри layout.

Что проверить в роутинге перед публикацией

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

Перед релизом пройдите не только по меню. Скопируйте внутренний URL, откройте его в новой вкладке, обновите страницу и проверьте 404-экран. Так быстро находятся ошибки, которые не видны при обычных кликах по Link.

Проверочный список

• все ссылки сделаны через Link, а не обычный a без необходимости;
• динамические страницы читают параметры через useParams;
• страница 404 есть и не ломает layout;
• обновление страницы на /about или /products/1 не даёт 404;
• фильтры, которые важно отправлять ссылкой, живут в search params.

Как не запутать пользователя

URL должен отражать состояние страницы. Если пользователь открыл товар, в адресе должен быть id товара. Если применил поиск, запрос лучше хранить в параметрах. Так страницу можно отправить ссылкой и открыть заново.

Следующий шаг

После базовых маршрутов разберите layout routes и Outlet. Это сразу делает приложение аккуратнее: шапка и меню остаются общими, а внутри меняются только страницы.