const userRoute = createRoute({ path: '/users/$userId', component: UserPage, }) // search params ?page=1&sort=name { page: number, sort: string }
const { userId } = useParams(); ✓ OK TypeScript happy userId: string
TanStack Router FrontendType-safe routing with built-in search params
TanStack Router is the most type-safe React router available — every route, param, and search parameter is fully typed. Pairs naturally with TanStack Query for end-to-end typed data fetching.
TanStack Router is the most type-safe routing solution for React — every route path, search parameter, path parameter, and loader return type is fully typed with zero runtime overhead. Unlike React Router's string-based routes, TanStack Router uses TypeScript inference to catch routing errors at compile time. It includes built-in search param validation with Zod, route-level code splitting, loader-based data fetching, and devtools. For teams building complex React applications where type safety and developer productivity matter, TanStack Router eliminates an entire category of runtime bugs.
Quick start
npm create @tanstack/router@latest my-app
cd my-app
npm install
npm run devRead the full documentation at tanstack.com/router
100% type-safe routes
Every route path, param, and search string is fully typed — broken links are compile-time errors.
Typed search params
Search params validated and typed with Zod or Valibot — no more manual parsing or runtime surprises.
Route code splitting
Automatic code splitting per route with lazy loading — only ship the JavaScript each page actually needs.
Loaders & prefetch
Route loaders fetch data before navigation and prefetch on hover — instant page transitions with fresh data.
Devtools included
Built-in devtools panel to inspect route tree, params, search state, and loader cache in real time.
Framework agnostic
Works with React, Solid, Vue, and more — the same type-safe routing API regardless of your UI framework.
Why it's hard
Type-safe route tree configuration
Setting up the route tree with full type inference requires understanding TanStack Router's code generation or manual route tree definition — the initial setup is more complex than React Router.
Search param serialization patterns
Fully typed search params are powerful but require designing schemas (typically with Zod) for URL state. Complex filtering, pagination, and sorting UIs need careful param design.
Smaller community and fewer examples
TanStack Router is newer and has fewer tutorials, Stack Overflow answers, and real-world examples than React Router. Solving edge cases often requires Discord or reading source code.
Integration with existing React ecosystems
Integrating TanStack Router with auth libraries, analytics tools, and other routing-dependent packages may require custom adapters since most assume React Router.
Best practices
Use the route code generator
TanStack Router's route code generator watches your file system and generates a fully typed route tree. This eliminates manual route configuration and ensures type safety.
Define search param schemas per route
Use validateSearch with Zod schemas to get type-safe, validated URL search params. This turns your URL into a type-safe state store with automatic serialization.
Combine with TanStack Query for data loading
Use route loaders to call ensureQueryData from TanStack Query. This gives you cached data, background refetching, and optimistic updates with full type safety.
Enable devtools in development
TanStack Router Devtools show you the route tree, current params, search state, and loader data. Essential for debugging complex routing scenarios.
Frequently asked questions
Related technologies
Related services
Looking for end-to-end delivery? These services complement TanStack Router projects.
Web Design
Websites that load fast, look sharp, and convert visitors into customers
Web App Development
Full-stack web applications built for real users and real scale
SaaS Development
Subscription software built to scale from day one
Performance Optimization
Find the bottlenecks and fix them — in code, queries, and infrastructure
Want to build with TanStack Router?
Talk to our engineering team about your TanStack Router architecture. We'll respond within 24 hours.
We limit intake each month so every project gets the focus it deserves.