Что обновлено на 2026

Этот раздел фиксирует актуальные практики для TanStack Router v1 (latest) и служит “источником истины”, если в старых примерах есть расхождения.

Ключевые API, на которые стоит опираться

• Маршруты: createRootRoute/createRootRouteWithContext, createRoute, createFileRoute, createLazyFileRoute, createLazyRoute.
• Навигация: Link, Navigate, useNavigate, router.navigate.
• Префетч: preload="intent|render|viewport", router.preloadRoute(...), router.loadRouteChunk(route).
• Данные: loader, beforeLoad, loaderDeps, shouldReload, gcTime, staleTime, defer + Await.
• SSR: await router.load(), затем router.dehydrate(), на клиенте router.hydrate(...).

Важные соглашения в file-based routing

• Для ленивых экранов используйте связку route.tsx (critical config) + route.lazy.tsx (component/pending/error/notFound).
• В Vite включайте плагин @tanstack/router-plugin/vite и опцию autoCodeSplitting: true, если хотите автоматическое разделение critical/non-critical кода.
• Корневой __root.tsx не делят на lazy, он всегда участвует в рендере.

Что считать устаревшим в старых примерах

• Любые helper-ы вида usePrefetchRoute, router.cancelPreload, router.deferCancel, router.loadRoute(...).
• Событийные API в формате router.subscribe('eventName', ...).
• Синтаксис createFileRoute(...).createRoute(...).
• Компонентный доступ к контексту через Route.useContext() (в примерах используйте Route.useRouteContext()).

Рекомендуемый baseline-конфиг роутера

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  defaultPreloadDelay: 50,
  defaultPreloadStaleTime: 30_000,
})

Практика для production

• Пробрасывайте signal из loader в каждый HTTP-запрос (отмена при быстром переходе).
• После мутаций инвалидация обычно делается через TanStack Query (invalidateQueries) и при необходимости router.invalidate().
• Для форм с несохранёнными данными используйте useBlocker, а не beforeLoad.
• Для тяжёлых экранов сначала настройте preloading (intent/viewport), потом оптимизируйте чанки.

Мини-чеклист актуальности

• В проекте используется @tanstack/react-router v1 latest.
• Плагин генерации дерева маршрутов подключён и работает в dev/CI.
• Префетч настроен через preload/preloadRoute.
• SSR-пайплайн: load -> dehydrate -> hydrate.
• Нет обращений к устаревшим/неподдерживаемым helper-методам.