TanStack Router

Build fully type-safe React routes with TanStack Router. Search params are typed, loaders run in parallel, errors fall back gracefully, and the URL is the source of truth.

This skill generates TanStack Router v1 file-based routes, typed search params with Zod validation, beforeLoad guards, parallel loaders, deferred data, error and pending boundaries, and integration with TanStack Query. Covers code splitting, prefetching, and the Devtools.

When to use

Use when you need true type-safety for routes and search params, when React Router's type story isn't enough, or when building a data-driven app where the URL must be the source of truth.

Examples

Typed search params with Zod

Validate filters in the URL with Zod

Create a /products route with typed search params (category, sort, page) validated by Zod, and a loader that fetches based on them

Auth guard with beforeLoad

Redirect unauthenticated users

Add a beforeLoad guard on a /dashboard route group that redirects to /login with a redirect search param when no session exists