Учебник React Router

Введение
- Что такое React Router и зачем он нужен
- История развития библиотеки
- Установка и начальная настройка
Основы маршрутизации
- Компонент BrowserRouter
- Компонент HashRouter
- Компонент MemoryRouter
- Различия между типами роутеров
- Настройка базового пути приложения
- Компонент Routes и Route
- Вложенные маршруты
- Параметры маршрутов
- Опциональные параметры
- Wildcard-маршруты и обработка 404
Навигация
- Компонент Link
- Компонент NavLink
- Активные ссылки и стилизация
- Программная навигация с useNavigate
- Компонент Navigate для редиректов
- Относительные и абсолютные пути
- Передача state при навигации
- Замена записи в истории
Хуки маршрутизации
- useParams для доступа к параметрам
- useLocation и работа с объектом location
- useNavigate для императивной навигации
- useMatch для проверки совпадения маршрута
- useSearchParams для query-параметров
- useResolvedPath для разрешения путей
- useRoutes для программного создания маршрутов
- useNavigationType для определения типа навигации
Загрузка данных
- Концепция loader в React Router
- Создание функций loader
- Хук useLoaderData
- Обработка ошибок в loader
- Defer для отложенной загрузки
- Await и Suspense с отложенными данными
- useAsyncValue и useAsyncError
- Стратегии prefetching данных
Действия и формы
- Концепция action в React Router
- Компонент Form
- Обработка отправки форм через action
- useActionData для доступа к результатам action
- useFetcher для фоновых операций
- Множественные fetcher на одной странице
- useSubmit для программной отправки форм
- Работа с FormData
Навигация и состояние
- useNavigation для отслеживания навигации
- Индикаторы загрузки
- Optimistic UI с useFetcher
- Блокировка навигации
- useBlocker для предотвращения перехода
- Промпты подтверждения
- Обработка незавершенных изменений
Продвинутая маршрутизация
- Динамическое создание маршрутов
- Index routes
- Layout routes
- Pathless routes
- Splat routes для сложных паттернов
- Приоритет маршрутов
- Алгоритм ранжирования маршрутов
- Наследование контекста в маршрутах
Обработка ошибок
- ErrorBoundary в маршрутах
- Компонент errorElement
- useRouteError для доступа к ошибкам
- Обработка ошибок загрузки данных
- Обработка ошибок в action
- Пользовательские страницы ошибок
- Восстановление после ошибок
- Логирование ошибок маршрутизации
Вложенная маршрутизация
- Концепция Outlet
- Передача контекста через Outlet
- useOutletContext
- Вложенные layout
- Общие компоненты для вложенных маршрутов
- Относительные пути во вложенных маршрутах
- Index маршруты во вложенной структуре
Код-сплиттинг и ленивая загрузка
- Lazy loading компонентов маршрутов
- React.lazy и Suspense
- Функция lazy в React Router
- Префетчинг маршрутов
- Обработка ошибок загрузки модулей
- Оптимизация размера бандлов
Защита маршрутов
- Реализация приватных маршрутов
- Условный рендеринг Route
- Проверка аутентификации в loader
- Редиректы для неавторизованных пользователей
- Ролевая модель доступа
- Хранение состояния для возврата после входа
- Обработка истекших сессий
Работа с query-параметрами
- Чтение query-параметров
- Обновление query-параметров
- Множественные значения параметров
- Синхронизация с состоянием компонента
- Сериализация сложных объектов
- Дефолтные значения параметров
- История изменений параметров
Скроллинг
- Автоматическое восстановление позиции скролла
- ScrollRestoration компонент
- Управление поведением скролла
- Скролл к якорям
- Скролл во вложенных маршрутах
- Обработка длинных страниц
Серверный рендеринг
- StaticRouter для SSR
- Гидратация приложения
- Обработка маршрутов на сервере
- Передача данных с сервера
- createStaticHandler
- createStaticRouter
- Интеграция с фреймворками SSR
Тестирование
- Настройка тестового окружения
- MemoryRouter в тестах
- Мокирование навигации
- Тестирование loader и action
- Тестирование защищенных маршрутов
- Интеграционное тестирование навигации
- Снапшот-тестирование маршрутов
React Router и состояние
- Координация с state management
- Синхронизация URL с глобальным состоянием
- Маршрутизация как источник истины
- Паттерны работы с Redux
- Интеграция с Context API
- Zustand и маршрутизация
Производительность
- Мемоизация компонентов маршрутов
- Оптимизация ререндеров
- Профилирование навигации
- Метрики производительности
- Уменьшение размера loader данных
- Кеширование результатов
- Дебаунсинг навигации
Анимации переходов
- Библиотеки для анимации переходов
- Framer Motion с React Router
- Координация анимаций и навигации
- Прерывание анимаций
- Shared element transitions
Мобильная разработка
- React Router в React Native
- NativeRouter
- Deep linking
- Жесты и свайпы
- Табы и стеки
- Интеграция с нативной навигацией
Миграция
- Миграция с версии 5 на 6
- Ломающие изменения
- Обновление Switch на Routes
- Замена useHistory на useNavigate
- Рефакторинг render props
- Поэтапная миграция
- Совместимость компонентов
Продвинутые паттерны
- Конфигурационная маршрутизация
- Генерация маршрутов из данных
- Middleware для маршрутов
- Композиция маршрутов
- HOC для маршрутов
- Render props паттерн
- Расширение функциональности роутера
Отладка
- React DevTools для маршрутизации
- Логирование навигации
- Отладка loader и action
- Инспекция состояния роутера
- Трассировка проблем
TypeScript
- Типизация маршрутов
- Типобезопасные параметры
- Генерация типов из маршрутов
- Строгая типизация навигации
Безопасность
- XSS и маршрутизация
- Валидация параметров маршрутов
- Безопасная работа с редиректами
- Ограничение доступа к данным
- Аудит зависимостей
Интеграция с экосистемой
- React Router и Meta-фреймворки
- Remix Framework
- Gatsby и маршрутизация
- Использование с Vite
Альтернативные решения
- TanStack Router
- Wouter
- Reach Router
- Когда не использовать React Router
- Кастомная реализация роутинга