Capítulo 1 de 57

Chapter 1: Overview

Core Idea

TanStack Router is a router for React and Solid applications built around 100% inferred TypeScript type safety, first-class typesafe search parameters, and a built-in SWR-style caching layer for route loaders, going well beyond what typical routers offer.

Key Concepts

  • 100% Inferred TypeScript Support: The router is fully aware of every route's path, path params, search params, and context at any point in the code, giving lossless type inference and guaranteeing that navigate/Link calls that typecheck will succeed.
  • 1st Class Search Parameters: Search params are treated as a powerful, global, serializable, bookmarkable state manager (like useState in the URL), automatically parsed/serialized as JSON, validated, typed, and inherited from parent routes.
  • Built-in Cache: A lightweight caching layer loosely based on TanStack Query, providing sane defaults for reuse, invalidation, and garbage collection of loader data without requiring an external library.
  • Flexible Data Lifecycle APIs: context, beforeLoad, loaderDeps, and loader work together to declare data dependencies, prefetch data, and integrate with external data libraries (TanStack Query, SWR, Apollo, Relay, or custom).
  • Inherited Route Context: Context defined on a route (including the router/root route) is inherited by all child routes, type-safe and useful for auth, SSR/CSR data preloading, theming, and singletons.
  • File-based and/or Code-based Routing: Both approaches are supported simultaneously; file-based routing generates route configuration via the Vite plugin or TanStack Router CLI, but the developer stays in control of how generated code is used.
  • Route Masking: One of the standard router capabilities (alongside nested routes, layout routes, prefetching, path params, error boundaries, SSR) that TanStack Router supports out of the box.

Key Takeaways

  1. TanStack Router's differentiator versus other routers is depth of TypeScript inference plus treating search params as first-class, typed application state, not an afterthought.
  2. The built-in loader caching layer removes the need for an external data library for basic use cases, while still integrating cleanly with TanStack Query, SWR, etc. for advanced needs.
  3. File-based routing is generated by tooling but the output remains fully inspectable and controllable by the developer, it is not a black box.

Connects To

  • Ch 2: Quick Start shows how to scaffold a project using these features.
  • Ch 4: Decisions on DX explains why the router's configuration and file-based routing preference exist.
  • Ch 5: Comparison contrasts these features against Next.js and React Router/Remix in detail.
PróximoChapter 2: Quick Start