Quick Start

Impatient?

The fastest way to get started with TanStack Router is to scaffold a new project. Just run:

npx create-tsrouter-app@latest

npx create-tsrouter-app@latest

The CLI will guide you through a short series of prompts to customize your setup, including options for:

• File-based or code-based route configuration
• TypeScript support
• Tailwind CSS integration
• Toolchain setup
• Git initialization

Once complete, a new React project will be generated with TanStack Router installed and ready to use:

cd your-project-name
npm run dev

cd your-project-name
npm run dev

Routing Options

TanStack Router supports both file-based and code-based route configurations. You can specify your preference during the CLI setup, or use these commands directly:

File-Based Route Generation

The file-based approach is the recommended option for most projects. It automatically creates routes based on your file structure, giving you the best mix of performance, simplicity, and developer experience.

npx create-tsrouter-app@latest my-app --template file-router

npx create-tsrouter-app@latest my-app --template file-router

Code-Based Route Configuration

If you prefer to define routes programmatically, you can use the code-based route configuration. This approach gives you full control over routing logic.

npx create-tsrouter-app@latest my-app

npx create-tsrouter-app@latest my-app

With either approach, navigate to your project directory and start the development server:

cd my-app
npm run dev

cd my-app
npm run dev

Existing Project

If you have an existing React project and want to add TanStack Router to it, you can install it manually.

Requirements

Before installing TanStack Router, please ensure your project meets the following requirements:

• react v18 or later with createRoot support.
• react-dom v18 or later.

TanStack Router is currently only compatible with React (with ReactDOM) and Solid. If you're interested in contributing to support other frameworks, such as React Native, Angular, or Vue, please reach out to us on Discord.

Installation

To install TanStack Router in your project, run the following command using your preferred package manager:

npm install @tanstack/react-router
# or
pnpm add @tanstack/react-router
#or
yarn add @tanstack/react-router
# or
bun add @tanstack/react-router
# or
deno add npm:@tanstack/react-router

npm install @tanstack/react-router
# or
pnpm add @tanstack/react-router
#or
yarn add @tanstack/react-router
# or
bun add @tanstack/react-router
# or
deno add npm:@tanstack/react-router

Once installed, you can verify the installation by checking your package.json file for the dependency.

{
  "dependencies": {
    "@tanstack/react-router": "^x.x.x"
  }
}

{
  "dependencies": {
    "@tanstack/react-router": "^x.x.x"
  }
}