Introduction to TanStack Router

​

Why TanStack Router?

• 100% Type-Safe: Full TypeScript support with automatic type inference for routes, params, and search parameters
• Built-in Caching: Intelligent data loading with automatic cache management
• URL State Management: First-class support for search params as application state
• Code-Based or File-Based Routing: Choose the routing style that fits your workflow
• Nested Layouts: Powerful layout composition with route hierarchies
• Data Loaders: Load data before rendering with built-in async support
• Error Handling: Granular error boundaries at the route level
• Path & Search Params: Type-safe params with validation support

​

Key Features

​

How It Works

1. Routes - Define your application structure using route definitions
2. Router - Create a router instance that manages navigation and state
3. RouterProvider - Provide the router to your React tree
4. Navigation - Use Link components and hooks for type-safe navigation
5. Data Loading - Define loaders to fetch data before rendering

​

Two Routing Approaches

​

Code-Based Routing

import { createRoute, createRouter } from '@tanstack/react-router'

const rootRoute = createRootRoute({
  component: RootLayout,
})

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: Home,
})

const router = createRouter({
  routeTree: rootRoute.addChildren([indexRoute]),
})

​

File-Based Routing

// src/routes/__root.tsx
export const Route = createRootRoute({
  component: RootLayout,
})

// src/routes/index.tsx
export const Route = createFileRoute('/')({  
  component: Home,
})

​

Next Steps

​

Community & Support

• GitHub: tanstack/router
• Discord: TanStack Discord
• Twitter: @tan_stack