12. Router: настройка

Установка

npm install @tanstack/react-router
# Для file-based routing (генерация типов)
npm install -D @tanstack/router-plugin @tanstack/router-devtools

Базовая настройка (code-based)

1. createRootRoute

Корневой маршрут — родитель всех остальных маршрутов. Обычно содержит общий layout:

import { createRootRoute, Outlet } from '@tanstack/react-router'

export const rootRoute = createRootRoute({
  component: () => (
    <div>
      <Navigation />
      <Outlet />  {/* Здесь рендерятся дочерние маршруты */}
    </div>
  ),
})

2. createRoute

Создание дочерних маршрутов:

import { createRoute } from '@tanstack/react-router'

export const usersRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/users',
  component: UsersPage,
})

export const userDetailRoute = createRoute({
  getParentRoute: () => usersRoute,
  path: '/$userId',
  component: UserDetail,
})

3. Дерево маршрутов

const routeTree = rootRoute.addChildren([
  indexRoute,
  usersRoute.addChildren([userDetailRoute]),
  settingsRoute,
])

4. createRouter и RouterProvider

import { createRouter, RouterProvider } from '@tanstack/react-router'

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',  // Prefetch при hover
})

// Обязательно для TypeScript
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

function App() {
  return <RouterProvider router={router} />
}

File-based маршрутизация

С плагином @tanstack/router-plugin структура файлов автоматически генерирует типы:

src/routes/
  __root.tsx           # Корневой маршрут
  index.tsx            # /
  users/
    index.tsx          # /users
    $userId.tsx        # /users/:userId
    $userId/
      edit.tsx         # /users/:userId/edit
  _layout/             # Layout без влияния на URL
    settings.tsx       # /settings (с layout)

createFileRoute

В file-based роутинге каждый файл использует createFileRoute:

// routes/users/$userId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/users/$userId')({
  component: UserDetail,
  loader: ({ params }) => fetchUser(params.userId),
})

Опции createRouter

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',         // 'intent' | 'viewport' | false
  defaultPreloadStaleTime: 30_000,  // Как долго prefetch актуален
  defaultStaleTime: 0,              // staleTime для лоадеров
  context: {                        // Глобальный контекст (queryClient и т.д.)
    queryClient,
  },
})