Урок 01

Что такое клиентский роутинг

Роутинг — это сопоставление URL с тем, что отображается на экране. В классическом сайте каждый URL — отдельный запрос к серверу, и сервер возвращает готовый HTML. В SPA роутинг работает на клиенте.

Как это работает

Когда пользователь открывает /posts/5 в SPA:

  1. Браузер загружает index.html
  2. Загружается JS-бандл
  3. Роутер читает текущий URL
  4. Находит совпадающий маршрут
  5. Рендерит соответствующий компонент

Сервер отдаёт один HTML для всех URL. Дальше всё решает JavaScript.

History API

Браузер предоставляет History API для управления URL без перезагрузки:

history.pushState({}, '', '/posts/5');
history.replaceState({}, '', '/posts/5');

Роутеры используют его под капотом. При клике по внутренней ссылке URL меняется, но страница не перезагружается.

Проблема прямого захода

Если пользователь открывает /posts/5 напрямую (например, по ссылке из мессенджера), сервер получает запрос на этот путь. Но у сервера нет такого файла. Возвращается 404.

Решение — fallback на сервере: все неизвестные пути отдают index.html. Дальше роутер сам разберётся.

В Nginx:

location / {
    try_files $uri $uri/ /index.html;
}

Виды роутинга

  • BrowserRouter — использует History API, красивые URL (/posts/5)
  • HashRouter — использует хеш (/#/posts/5), работает без настройки сервера

BrowserRouter — стандарт. HashRouter — только если нет контроля над сервером.

Библиотеки

  • React Router — стандарт, де-факто официальное решение
  • TanStack Router — типизированный роутинг, всё в типах
  • Wouter — минималистичный, лёгкий

В курсе — React Router.

Установка

npm install react-router-dom

В React Router v7 пакет называется react-router, но react-router-dom тоже работает.

Итоги

  • Роутинг на клиенте — без перезагрузки страницы
  • History API меняет URL
  • Сервер должен отдавать index.html для всех путей
  • React Router — стандарт
  • BrowserRouter даёт красивые URL