Capítulo 2 de 57

Chapter 2: Quick Start

Core Idea

The fastest way to start a TanStack Router project is scaffolding via the @tanstack/cli, which prompts for file-based vs code-based routing, TypeScript, Tailwind, and toolchain options; alternatively, the router can be added manually to an existing React project.

Key Concepts

  • @tanstack/cli create --router-only: The scaffolding command for a new React project with only the router installed (Solid uses --framework solid).
  • File-Based Route Generation: The recommended default; routes are automatically created based on the file structure, offering the best mix of performance, simplicity, and DX.
  • Code-Based Route Configuration: An alternative where routes are defined programmatically for full control over routing logic.
  • Existing Project Installation: Manual install of @tanstack/react-router (or @tanstack/solid-router) into a project that already has React.
  • Requirements: React 18+ with createRoot support and react-dom 18+ (Solid: solid-js v1.x); TypeScript 5.3.x+ is recommended, not strictly required. Only React and Solid are currently supported frameworks.

Code Examples

{
  "dependencies": {
    "@tanstack/react-router": "^x.x.x"
  }
}
  • What it demonstrates: Verifying the manual installation succeeded by checking package.json for the dependency entry.

Key Takeaways

  1. For new projects, prefer the CLI scaffold (@tanstack/cli create --router-only) over manual setup, it wires up TypeScript, Tailwind, and tooling choices interactively.
  2. File-based routing is the recommended default for most projects; code-based routing is an opt-in alternative for full programmatic control.
  3. TanStack Router only supports React and Solid today; other frameworks (React Native, Angular, Vue) would require community contribution.

Connects To

  • Ch 1: Overview introduces the features this quick start puts into practice.
  • Ch 7: Manual Installation goes deeper into adding the router to an existing project by hand.
  • Ch 8-11: Installation guides for Vite, Rspack, Webpack, and Esbuild build on this chapter's manual installation path.