Installation
TanStack Router can be installed in React, Solid, or Vue applications. Choose your framework and package manager to get started.
Prerequisites
Before installing TanStack Router, ensure you have:
- Node.js 20.19 or higher
- A supported framework installed:
- React 18.0.0 or higher (or React 19+)
- Solid.js 1.9.10 or higher
- Vue 3.3.0 or higher
Source: packages/react-router/package.json:117-119, packages/solid-router/package.json:124-126, packages/vue-router/package.json:93-95
React Installation
Install TanStack Router for React applications.
npm install @tanstack/react-router
pnpm add @tanstack/react-router
yarn add @tanstack/react-router
bun add @tanstack/react-router
npm install --save-dev @tanstack/react-router-devtools
pnpm add -D @tanstack/react-router-devtools
yarn add --dev @tanstack/react-router-devtools
bun add --dev @tanstack/react-router-devtools
Optional: Router Plugin (File-Based Routing)
For file-based routing with automatic route generation, install the router plugin:
npm install --save-dev @tanstack/router-plugin
pnpm add -D @tanstack/router-plugin
yarn add --dev @tanstack/router-plugin
bun add --dev @tanstack/router-plugin
vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'
export default defineConfig({
plugins: [
tanstackRouter({ target: 'react', autoCodeSplitting: true }),
react(),
],
})
The router plugin supports Vite, Webpack, Rspack, and ESBuild. See the plugin documentation for configuration options for other bundlers.
Solid Installation
Install TanStack Router for Solid.js applications.
npm install @tanstack/solid-router
pnpm add @tanstack/solid-router
yarn add @tanstack/solid-router
bun add @tanstack/solid-router
npm install --save-dev @tanstack/solid-router-devtools
pnpm add -D @tanstack/solid-router-devtools
yarn add --dev @tanstack/solid-router-devtools
bun add --dev @tanstack/solid-router-devtools
Optional: Router Plugin (File-Based Routing)
For file-based routing, install the router plugin:
npm install --save-dev @tanstack/router-plugin
pnpm add -D @tanstack/router-plugin
yarn add --dev @tanstack/router-plugin
bun add --dev @tanstack/router-plugin
vite.config.ts:
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import { tanstackRouter } from '@tanstack/router-plugin/vite'
export default defineConfig({
plugins: [
tanstackRouter({ target: 'solid', autoCodeSplitting: true }),
solid(),
],
})
Vue Installation
Install TanStack Router for Vue applications.
npm install @tanstack/vue-router
pnpm add @tanstack/vue-router
yarn add @tanstack/vue-router
bun add @tanstack/vue-router
npm install --save-dev @tanstack/vue-router-devtools
pnpm add -D @tanstack/vue-router-devtools
yarn add --dev @tanstack/vue-router-devtools
bun add --dev @tanstack/vue-router-devtools
Optional: Router Plugin (File-Based Routing)
For file-based routing, install the router plugin:
npm install --save-dev @tanstack/router-plugin
pnpm add -D @tanstack/router-plugin
yarn add --dev @tanstack/router-plugin
bun add --dev @tanstack/router-plugin
vite.config.ts:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { tanstackRouter } from '@tanstack/router-plugin/vite'
export default defineConfig({
plugins: [
tanstackRouter({ target: 'vue', autoCodeSplitting: true }),
vue(),
],
})
Package Versions
The current stable version of TanStack Router is:
v1.163.3 - All framework packages use the same version number for consistency.
TypeScript Configuration
TanStack Router requires TypeScript for the best experience. Ensure your tsconfig.json includes:
{
"compilerOptions": {
"strict": true,
"skipLibCheck": true,
"moduleResolution": "bundler",
"jsx": "react-jsx" // or "preserve" for Vue/Solid
}
}
TanStack Router works best with TypeScript’s strict mode enabled. Some features like type-safe navigation require strict type checking.
Validation Libraries (Optional)
TanStack Router supports type-safe search parameter validation with popular validation libraries:
Zod
npm install zod @tanstack/zod-adapter
pnpm add zod @tanstack/zod-adapter
yarn add zod @tanstack/zod-adapter
bun add zod @tanstack/zod-adapter
Valibot
npm install valibot @tanstack/valibot-adapter
pnpm add valibot @tanstack/valibot-adapter
yarn add valibot @tanstack/valibot-adapter
bun add valibot @tanstack/valibot-adapter
ArkType
npm install arktype @tanstack/arktype-adapter
pnpm add arktype @tanstack/arktype-adapter
yarn add arktype @tanstack/arktype-adapter
bun add arktype @tanstack/arktype-adapter
Verify Installation
To verify your installation is successful, create a simple test file:
import { createRouter } from '@tanstack/react-router'
console.log('TanStack Router installed successfully!')
import { createRouter } from '@tanstack/solid-router'
console.log('TanStack Router installed successfully!')
import { createRouter } from '@tanstack/vue-router'
console.log('TanStack Router installed successfully!')
Next Steps
Now that you have TanStack Router installed, you’re ready to build your first application:
Quick Start Guide
Follow our step-by-step guide to create your first router
Troubleshooting
Module Not Found
If you see module resolution errors, ensure:
- You’ve installed the correct package for your framework
- Your
tsconfig.json has moduleResolution set to bundler or node16
- You’ve restarted your development server after installation
Type Errors
If TypeScript shows errors:
- Ensure you’re using TypeScript 5.4 or higher
- Enable
strict mode in your tsconfig.json
- Make sure you’ve registered your router type (covered in the Quick Start)
Plugin Issues
If the router plugin isn’t working:
- Verify the plugin is listed before your framework plugin in the Vite config
- Check that the
target option matches your framework
- Try clearing your build cache and restarting the dev server