Documentation Index
Fetch the complete documentation index at: https://mintlify.com/TanStack/router/llms.txt
Use this file to discover all available pages before exploring further.
Type-Safe Routing for Modern Web Apps
TanStack Router delivers end-to-end type safety, built-in caching, and powerful data loading capabilities for React, Solid, and Vue applications.
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
const router = createRouter({ routeTree })
function App() {
return <RouterProvider router={router} />
}
Why TanStack Router?
Build applications with confidence using a router designed for the modern web
Type-Safe Routes
Full TypeScript inference for routes, params, search params, and loaders
Built-in Caching
Automatic caching and revalidation of route data with fine-grained control
Smart Prefetching
Intelligent prefetching strategies for instant navigation experiences
Search Params
First-class support for type-safe, validated search parameters
Nested Routes
Powerful nested routing with layouts, error boundaries, and transitions
Full-Stack Ready
Scale to full-stack with TanStack Start for SSR, streaming, and server functions
Quick Start
Get up and running with TanStack Router in minutes
Install the package
Install TanStack Router using your preferred package manager:npm install @tanstack/react-router
Create your routes
Define your application routes using file-based or code-based routing:import { createRootRoute, createRoute } from '@tanstack/react-router'
const rootRoute = createRootRoute()
const indexRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/',
component: () => <div>Hello TanStack Router!</div>
})
Set up the router
Create and configure your router instance:import { createRouter, RouterProvider } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
const router = createRouter({ routeTree })
function App() {
return <RouterProvider router={router} />
}
Start navigating
Use the Link component for type-safe navigation:import { Link } from '@tanstack/react-router'
function Navigation() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/posts/$postId" params={{ postId: '1' }}>Post 1</Link>
</nav>
)
}
Explore TanStack Router
Deep dive into routing concepts and advanced features
Core Concepts
Learn about routing fundamentals, type safety, and data loading patterns
Routing Guides
Step-by-step guides for file-based routing, nested routes, and error handling
TanStack Start
Build full-stack applications with SSR, streaming, and server functions
API Reference
Complete API documentation for Router, Route, Link, hooks, and components
Ready to build with TanStack Router?
Start building type-safe, performant routing for your React, Solid, or Vue application today