Маршрутизация и data routers

Вы построите вложенную route tree с loaders/actions, типизированными параметрами, pending/error UI и отменяемой навигацией.

До начала достаточно async boundaries, Actions, forms и browser URL semantics. В конце должен появиться не конспект, а маршрутизированное рабочее место с detail routes, фильтрами URL, mutations и recovery.

Вложенные routes отражают устойчивые layout/data/error boundaries. Parent рендерит Outlet для child. Плоский список абсолютных путей дублирует shells и усложняет ownership. Index route представляет default child без дополнительного segment.

Рабочая проверка. Соберите tickets layout с index и detail child.

Типичная поломка. Дублировать sidebar во всех route elements.

URL params приходят строками или отсутствуют. UUID/number/enum проверяют до вызова доменного client. Type generation framework mode помогает именам, но не доказывает runtime-валидность значения. Некорректный id обычно превращается в 400/404 route response, а не generic crash.

Рабочая проверка. Проверьте invalid numeric id и отсутствующую запись разными исходами.

Типичная поломка. Number(param) без проверки NaN/целого/диапазона.

Loader принадлежит route и запускается при навигации. Parent/child data могут загружаться параллельно согласно router strategy; избегайте последовательного ожидания независимых источников. Request содержит AbortSignal, который передают fetch. Компонент читает готовый результат или deferred resource.

Рабочая проверка. Запустите независимые справочники через Promise.all и передайте request.signal.

Типичная поломка. Повторить loader fetch в component Effect.

Route action обрабатывает mutation из form/fetcher. После action router revalidates loaders, возвращая UI к server truth. Validation response отличается от redirect/success и system error. Native Form сохраняет progressive semantics; fetcher выполняет действие без навигации.

Рабочая проверка. Измените статус через action и подтвердите обновление loader data.

Типичная поломка. Мутировать loader data object на клиенте без revalidation/cache policy.

Router navigation state показывает loading/submitting и form data. Global progress полезен для route change, локальный pending — для конкретной операции. Не заменяйте всю страницу spinner при каждой навигации: сохраняйте layout и, где безопасно, прежний content.

Рабочая проверка. Покажите submitting статус только на изменяемой строке по formData id.

Типичная поломка. Блокировать все приложение при background fetcher.

Route boundary локализует loader/action/render failure. Expected not-found/forbidden можно выразить Response/status и показать специальный UI; unexpected error журналируется с correlation id без stack пользователю. Parent boundary сохраняет shell, child boundary — соседние маршруты.

Рабочая проверка. Разделите 404 заявки и 503 backend failure.

Типичная поломка. Возвращать 200 с текстом error для любого loader failure.

Search params подходят фильтрам, сортировке, pagination и tabs, которые пользователь ожидает share/reload/back. Парсинг задаёт defaults и canonical serialization; неизвестные значения не должны приводить к crash. Эфемерный hover или незавершённый секретный draft в URL не нужен.

Рабочая проверка. Сериализуйте filters детерминированно и проверьте back/forward.

Типичная поломка. Дублировать filter в URL и local state с Effects в обе стороны.

Declarative mode даёт client routing primitives, data mode добавляет loaders/actions, framework mode — conventions, typegen, SSR и bundling integration. Выбирайте минимальный режим, покрывающий rendering/deployment требования. Не смешивайте API разных режимов случайно и не принимайте router за server authorization.

Рабочая проверка. Запишите ADR выбора data или framework mode для приложения.

Типичная поломка. Добавить framework mode только ради одного Link, не оценив deployment.

Создайте /tickets?status= и /tickets/:ticketId: parent loader загружает справочники, child — заявку, action изменяет статус, navigation показывает pending, invalid id даёт 404 boundary, фильтры восстанавливаются history.

Критерий завершения: deep link работает после reload, loaders не дублируются Effects, back/forward восстанавливает URL state, ошибки локализованы route boundary. Сначала зафиксируйте наблюдаемое поведение тестом или измерением, затем меняйте реализацию.