Installation

Install TanStack Router in your React application with npm, yarn, or pnpm

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

npm install @tanstack/react-router

Additional Packages

Depending on your needs, you may want to install additional packages:

DevTools (Recommended)

The DevTools package provides a visual debugger for inspecting router state during development:

npm

npm install --save-dev @tanstack/react-router-devtools

File-Based Routing Plugin

For file-based routing, install the appropriate bundler plugin:

npm (Vite)

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:

Zod

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:

• npm package page
• GitHub releases

All TanStack Router packages are published together with matching version numbers for compatibility.