TanStack Router

A fully type-safe React router with built-in data loading, caching, and URL search-param validation.

Framework
npm
v1.170.46
15,243 stars
MIT License

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum. How we score it →
94 /100 Excellent
Development Activity 100
Maintenance 100
Community 76
Maturity 60
Momentum 40

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation. How we score it →
90 /100 Excellent
Architecture 92
Code Quality 90
Innovation 88
Learning Curve 88

TanStack Router is a router for React applications that treats type safety as a first-class concern: route paths, params, search params, and loader data are all inferred end-to-end, so typos and shape mismatches surface at compile time instead of in production. Built on top of the framework-agnostic @tanstack/router-core, it layers in schema-validated search params, built-in request caching and preloading, nested layouts, and first-class error and not-found boundaries.

Beyond client-side routing, it is also the foundation for TanStack Start, a full-stack framework adding SSR, streaming, and server functions on top of the same route tree. Teams adopt it either as a drop-in replacement for React Router with stronger typing, or as the routing layer of a full-stack TanStack Start application.

What You Get

  • End-to-end type-safe routes, path params, and loader data inferred from your route tree — no manual generic annotations
  • Schema-driven search-param validation and parsing (Zod, Valibot, ArkType adapters included)
  • Built-in route loader caching, preloading, and stale-while-revalidate style invalidation
  • Nested layouts, pathless layout routes, and route-level pending/error/not-found boundaries
  • A file-based route generator (@tanstack/router-plugin / router-cli) that keeps the route tree in sync with your routes/ directory
  • Devtools panel for inspecting the route tree, matches, and loader cache in real time

Common Use Cases

  • Replacing React Router in a client-rendered SPA to get compile-time-checked links, params, and search state
  • Building the routing layer of a TanStack Start full-stack app with SSR, streaming, and server functions
  • Apps with complex, validated URL state (filters, pagination, sort) that need search params treated as typed application state rather than raw strings
  • Migrating from a loosely-typed router where param/typo bugs regularly reach production

Under The Hood

Architecture

TanStack Router splits cleanly into a framework-agnostic core (@tanstack/router-core, ~3,275 lines in router.ts plus a ~2,129-line route.ts) and thin per-framework adapters (@tanstack/react-router’s router.ts is only ~119 lines, mostly type declaration merging and defaults). The core owns the route tree, matching, loader/cache lifecycle (load-matches.ts, lru-cache.ts), history integration (via the internal @tanstack/history package), and structural-sharing logic (structuralSharing.ts) that avoids re-rendering matches whose data hasn’t changed. The React package layers hooks (useLoaderData, useMatch, useNavigate, useSearch, etc.), a RouterProvider, and SSR entry points (src/ssr/) on top of that core, and the same core is reused by the Solid and Vue adapters in the same monorepo — evidence of a deliberate framework-agnostic core / thin-adapter split.

Tech Stack

Pure TypeScript (98% of the codebase) built with Vite, tested with Vitest (including a dedicated test:perf benchmark suite via vitest bench), and packaged as dual ESM/CJS output with publint/attw build-time checks for package export correctness. Runtime dependencies are deliberately minimal (@tanstack/history, @tanstack/react-store, @tanstack/router-core, isbot), with React 18/19 as peer dependencies and adapters for Zod, Valibot, and ArkType shipped as separate optional packages rather than hard dependencies.

Code Quality

The repo carries 71 test files across packages/react-router and packages/router-core alone, plus type-level tests run against five separate TypeScript versions (test:types:ts55 through ts60) to guard the type inference that is the library’s core value proposition. noUncheckedIndexedAccess and checkJs are enabled in the shared tsconfig.json, and ESLint runs as its own test target (test:eslint) in every package, indicating quality gates are enforced per-package rather than only at the repo root.

API Design The public API favors typed hooks (useLoaderData, useParams, useSearch) over generic string-keyed access, and file-based routing removes most manual route-tree boilerplate for common cases — the generator infers types from file names/paths automatically. The tradeoff is a real learning curve: getting full type inference requires understanding route tree composition, createFileRoute/createRoute generics, and search-param schema wiring, which is steeper than a conventional untyped router but is offset by 57 runnable example apps and ~244 documentation files covering guides for each feature area.

Used by 159 apps in this directory

TypeScript
78%
LGPL 3.0

Latitude

AI Agents · Monitoring

4,733

Open-source AI agent monitoring that catches what will break next before your users do.

View details
87
Repo Health
88
Technical
67
Dependency
Built with
TypeScript 78%
Python 11%
Rust 11%
Updated 6 days ago
Python
55%
MIT

LibrePhotos

File Storage

8,111

Self-hosted photo library with AI-powered face recognition, semantic search, and automatic event albums — no cloud required.

View details
84
Repo Health
78
Technical
66
Dependency
Built with
Python 55%
TypeScript 43%
Updated 5 days ago
Python
55%
MIT

LibrePhotos

File Storage

8,111

Self-hosted photo library with AI-powered face recognition, semantic search, and automatic event albums — no cloud required.

View details
84
Repo Health
78
Technical
66
Dependency
Built with
Python 55%
TypeScript 43%
Updated 5 days ago
TypeScript
96%
MIT

likec4

Developer Tools · Devops

5,954

Define your software architecture as code and get always up-to-date, interactive C4 diagrams generated automatically from a DSL.

View details
89
Repo Health
83
Technical
78
Dependency
Built with
TypeScript 96%
Updated 5 days ago
TypeScript
96%
MIT

likec4

Developer Tools · Devops

5,954

Define your software architecture as code and get always up-to-date, interactive C4 diagrams generated automatically from a DSL.

View details
89
Repo Health
83
Technical
78
Dependency
Built with
TypeScript 96%
Updated 5 days ago
TypeScript
96%
MIT

likec4

Developer Tools · Devops

5,954

Define your software architecture as code and get always up-to-date, interactive C4 diagrams generated automatically from a DSL.

View details
89
Repo Health
83
Technical
78
Dependency
Built with
TypeScript 96%
Updated 5 days ago
TypeScript
53%
MIT

MentraOS

AI Development · Developer Tools

2,391

The open source operating system and SDK that lets developers build one app and run it across smart glasses from Even Realities, Vuzix, Mentra Live, and more.

View details
92
Repo Health
77
Technical
66
Dependency
Built with
TypeScript 53%
Java 16%
Updated 5 days ago
TypeScript
53%
MIT

MentraOS

AI Development · Developer Tools

2,391

The open source operating system and SDK that lets developers build one app and run it across smart glasses from Even Realities, Vuzix, Mentra Live, and more.

View details
92
Repo Health
77
Technical
66
Dependency
Built with
TypeScript 53%
Java 16%
Updated 5 days ago
Rust
86%
Apache 2.0

mesh-llm

AI Agents · AI Development

3,551

Mesh LLM pools GPUs and memory across every machine you own into one OpenAI-compatible API, so agents tap distributed compute instead of a single GPU box or a metered cloud bill.

View details
85
Repo Health
91
Technical
69
Dependency
Built with
Rust 86%
TypeScript 10%
Updated 5 days ago

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack
Join 750+ subscribers