Роутинг с react-router

Знакомимся с клиентским роутингом: как показывать разные «страницы» в одностраничном приложении.

react-router — самая популярная библиотека роутинга для React: она сопоставляет адрес в URL с компонентом и переключает их без перезагрузки страницы.

Что такое SPA

React-приложение обычно одностраничное (Single Page Application, SPA): браузер загружает один index.html, а дальше React сам меняет содержимое. «Переход между страницами» — это не новая загрузка с сервера, а замена компонентов. Чтобы связать это с адресной строкой, нужен роутер.

Установка

npm install react-router-dom

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

Три главных элемента: BrowserRouter (оборачивает приложение), Routes (контейнер маршрутов) и Route (один маршрут: путь → компонент):

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

Когда адрес в браузере совпадает с path, роутер рисует соответствующий element. Открыли /about — показывается <About />.

Навигация через Link

Внутри SPA переходят не обычным <a> (он перезагрузит страницу), а компонентом Link — он меняет URL и компонент без перезагрузки:

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

function Nav() {
  return (
    <nav>
      <Link to="/">Главная</Link>
      <Link to="/about">О нас</Link>
    </nav>
  );
}

Параметры маршрута

В пути /users/:id часть :id — это параметр. Компонент читает его хуком useParams:

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

function User() {
  const { id } = useParams();
  return <h1>Профиль пользователя {id}</h1>;
}

Открыв /users/42, вы получите id === "42" — удобно для страниц товара, профиля и т.п.

Ключевые элементы

Итог

• React-приложения — это SPA; роутер связывает URL с компонентами без перезагрузки.
• react-router: BrowserRouter оборачивает, Route сопоставляет путь и компонент, Link переключает.
• Параметры пути (/users/:id) читаются хуком useParams.