Урок 12

Итоги курса

Курс о роутинге в React.

Что ты узнал

  • Клиентский роутинг — навигация без перезагрузки через History API
  • React Router — BrowserRouter, Routes, Route
  • Динамические маршруты — :param и useParams
  • Вложенные маршруты — Outlet, index
  • Навигация — Link, NavLink, Navigate, useNavigate
  • Query-параметры — useSearchParams
  • Защищённые маршруты — компонент-обёртка, Navigate
  • Ленивая загрузка — React.lazy и Suspense
  • 404 и ошибки — path="*", ErrorBoundary
  • Прокрутка — ScrollToTop, восстановление
  • Хлебные крошки — useMatches

Что выбрать

Простое SPA — BrowserRouter + Routes + Route.

Большое приложение — createBrowserRouter с data API, loaders, errorElement.

Типизированный роутинг — TanStack Router.

Минимализм — Wouter.

Частые ошибки

  • Использовать <a> вместо <Link>
  • Забыть end на корневом NavLink
  • Не сбрасывать скролл при навигации
  • Хранить состояние только в компоненте, а не в URL
  • Не обрабатывать 404
  • Не защищать данные на сервере
  • Грузить всё в основном бандле
  • Забыть key в списках

Практика

  1. Сделай SPA с 5 страницами
  2. Добавь динамический маршрут /users/:id
  3. Общий layout с навигацией
  4. Защищённый раздел /admin
  5. Фильтры в URL
  6. Ленивая загрузка страниц
  7. Страница 404
  8. Хлебные крошки

Полезные ссылки

  • React Router: reactrouter.com
  • TanStack Router: tanstack.com/router
  • Wouter: github.com/molefrog/wouter
  • History API на MDN: developer.mozilla.org

Заключение

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