Skip to main content

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.

Get started with TanStack Router by installing the package in your React project.

​
Requirements

Before installing TanStack Router, ensure you have:
  • Node.js: Version 20.19 or higher
  • React: Version 18.0.0 or higher (React 19 is also supported)
  • TypeScript: Version 5.4 or higher (recommended for full type-safety)

​
Package Installation

Install the core router package using your preferred package manager: 
npm install @tanstack/react-router

​
Additional Packages

Depending on your needs, you may want to install additional packages: The DevTools package provides a visual debugger for inspecting router state during development: 
npm install --save-dev @tanstack/react-router-devtools

​
File-Based Routing Plugin

For file-based routing, install the appropriate bundler plugin: 
npm install --save-dev @tanstack/router-plugin
The @tanstack/router-plugin package works with Vite, Webpack, esbuild, and Rspack through a universal plugin interface.

​
Validation Adapters

Add type-safe validation for search params and path params: 
npm install @tanstack/zod-adapter zod

​
Vite Plugin Configuration (File-Based Routing)

If you’re using file-based routing with Vite, configure the plugin in your vite.config.ts:
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'

export default defineConfig({
  plugins: [
    TanStackRouterVite(),
    react(),
  ],
})
The TanStack Router plugin must be placed before the React plugin in the plugins array.

​
TypeScript Configuration

For the best development experience with full type-safety, ensure your tsconfig.json includes:
tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "skipLibCheck": false
  }
}
Setting "skipLibCheck": false enables full type checking for better route type inference.

​
Verify Installation

Create a simple test to verify the installation:
test.tsx
import { createRouter, createRootRoute } from '@tanstack/react-router'

const rootRoute = createRootRoute({
  component: () => <div>Hello TanStack Router!</div>,
})

const router = createRouter({ routeTree: rootRoute })

console.log('Router created successfully!', router)
If you can import these functions without errors, you’re ready to go!

​
Next Steps

Now that TanStack Router is installed, you can:

Follow the Quickstart

Build a working router in minutes

Learn File-Based Routing

Set up automatic route generation

Explore Code-Based Routing

Define routes programmatically

Configure DevTools

Set up the router DevTools

​
Package Versions

TanStack Router follows semantic versioning. You can check the latest version on:
All TanStack Router packages are published together with matching version numbers for compatibility.