11. Router: введение

Почему новый роутер?

Существующие решения (React Router, Next.js Router) были созданы без учёта TypeScript. Параметры маршрутов, поисковые параметры, данные лоадеров — всё это any или требует ручной типизации.

TanStack Router создан с TypeScript в основе: каждый параметр, каждый поисковый параметр, каждое значение лоадера полностью типизированы автоматически.

Ключевые принципы

100% Type-Safe

// Параметры маршрута знают свои типы
const { userId } = Route.useParams()
// userId: string — TypeScript знает это автоматически

// Поисковые параметры типизированы
const { page, filter } = Route.useSearch()
// page: number, filter: string — никаких any!

// Данные лоадера типизированы
const user = Route.useLoaderData()
// user: User — TypeScript выводит тип из queryFn

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

File-based (рекомендуется):

routes/
  __root.tsx       → /
  index.tsx        → /
  users/
    index.tsx      → /users
    $userId.tsx    → /users/:userId
    $userId/
      posts.tsx    → /users/:userId/posts

Code-based (программный контроль):

const rootRoute = createRootRoute({ component: Root })
const usersRoute = createRoute({ path: '/users', component: Users, getParentRoute: () => rootRoute })
const routeTree = rootRoute.addChildren([usersRoute])

Первоклассные Search Params

В React Router поисковые параметры — просто строки. В TanStack Router они валидируются схемой:

const Route = createFileRoute('/users')({
  validateSearch: (search) => ({
    page: Number(search.page) || 1,
    filter: String(search.filter || ''),
  }),
})

// Теперь useSearch() возвращает { page: number, filter: string }

Встроенные Lоадеры

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

function UserPage() {
  const user = Route.useLoaderData()  // User, не undefined
  return <div>{user.name}</div>
}

Сравнение с React Router

Функция	React Router v6	TanStack Router v1
Типизация params	any	Автоматическая
Search params	Строки	Типизированные с валидацией
Лоадеры	Базовые	Типизированные, с кэшированием
Devtools	Нет	Встроенные
Bundle size	~50kb	~35kb
SSR	Через Remix	Через TanStack Start