Quick Start

TanStack Router can be quickly added to any existing React project or used to scaffold a new one.

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.

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"
  }
}

To quickly scaffold a new project with TanStack Router, you can use the create-tsrouter-app command-line tool. This tool sets up a new React application with TanStack Router pre-configured, allowing you to get started quickly.

To create a new project, run the following command in your terminal:

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. All dependencies are automatically installed, so you can jump straight into development:

cd your-project-name
npm run dev

cd your-project-name
npm run dev

TanStack Router supports both file-based and code-based route configurations, allowing you to choose the approach that best fits your workflow.

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.

To create a new project using file-based route generation, run the following command:

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

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

This command sets up a new directory called my-app with everything configured. Once setup completes, you can then start your development server and begin building your application:

cd my-app
npm run dev

cd my-app
npm run dev

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

npx create-tsrouter-app@latest my-app

npx create-tsrouter-app@latest my-app

Similar to the file-based setup, this command creates a new directory called my-app with TanStack Router configured for code-based routing. After setup, navigate to your project directory and start the development server:

cd my-app
npm run dev

cd my-app
npm run dev

With either approach, you can now start building your React application with TanStack Router!