Learn fully type-safe routing — typed search params with validateSearch, loaders, file-based routing, and pending/error components
0 / 5 completed
1 / 5
What is the headline feature of TanStack Router?
TanStack Router: emphasises 100% inferred type safety. Routes are defined with a strongly typed tree, so navigating with <Link to="/posts/$postId" params={{ postId }} /> is checked at compile time, and useParams, useSearch, and loader data are all typed without any generated files at the public API level.
2 / 5
How does TanStack Router treat search params?
Search params: are treated as typed, validated state. A route declares validateSearch: (search) => mySchema.parse(search) (often with Zod). The parsed shape flows into useSearch() with full typing. Updating search is done via navigate({ search: (prev) => ({ ...prev, page: 2 }) }), making URL state as ergonomic as component state.
3 / 5
What does a route loader do in TanStack Router?
Loaders: a route can define loader: async ({ params }) => fetchPost(params.postId). The router awaits it before rendering and exposes the result via useLoaderData() with inferred types. Loaders support caching via staleTime and pair naturally with TanStack Query through queryClient.ensureQueryData for deduped, cached fetching.
4 / 5
What is file-based routing support in TanStack Router?
File-based routing: the TanStack Router plugin (Vite/Rspack) scans a routes/ directory and generates a routeTree.gen.ts file. Conventions like posts.$postId.tsx map to dynamic segments. This combines the ergonomics of file conventions with the framework's full type inference; code-based routing remains available for fine control.
5 / 5
How does TanStack Router handle pending and error states during navigation?
Pending and error UI: a route may set pendingComponent (shown while a loader resolves) and errorComponent (rendered if the loader throws). The router exposes defaultPendingMs and defaultPendingMinMs to delay the pending UI and enforce a minimum display time, preventing spinner flicker on fast loads.