TanStack Router Examples

Curated walkthrough of the official TanStack Router example projects (github.com/TanStack/router/tree/main/examples/react): real routing patterns with working code, not prose docs. Use when you want a concrete starting point for file-based vs code-based routing, SSR/streaming, deferred data, search-param validation, route masking, auth guards, or integrating TanStack Query/tRPC/Framer Motion with the router.

24 capítulos

TanStack Router Examples

Source: github.com/TanStack/router/tree/main/examples/react | Chapters: 24 (4 Quickstart & Basics + 2 Kitchen Sink + 4 Rendering & Data + 2 Search Params & Validation + 4 Navigation & UX + 1 Auth + 4 Third-Party Integrations + 3 Monorepo Setups) | Generated: 2026-08-25

How to Use This Skill

  • Without arguments: load the cheatsheet below to pick which example fits your use case
  • With a technique name: ask about SSR streaming, search param validation, route masking, auth guard, etc.; I find and read the matching chapter
  • With a chapter: ask for ch009; I load that specific example
  • Browse: ask "what examples do you have?" to see the full index

Each chapter documents one real example project's routing setup with an actual code excerpt, not a rewritten tutorial. For the full project, clone TanStack/router and look at examples/react/<name>.

Which Example to Start From

  • Brand-new app, no strong opinions -> quickstart-file-based (Ch 1), the smallest file-based setup.
  • Prefer no code-generation step -> quickstart (Ch 2) or basic (Ch 4), routes defined inline with createRoute.
  • Need nested layouts, pathless layouts, or a dynamic $param route as a template -> basic-file-based (Ch 3).
  • Want a realistic multi-section reference app to copy wholesale -> kitchen-sink-file-based (Ch 5), or the React Query variant kitchen-sink-react-query-file-based (Ch 6).
  • Need server-side rendering, optionally with streaming for slow data -> basic-ssr-file-based (Ch 7) / basic-ssr-streaming-file-based (Ch 8).
  • Have slow, non-critical data that shouldn't block first paint -> deferred-data (Ch 9).
  • Worried about route-tree scale -> large-file-based (Ch 10).
  • Need default or validated search params -> basic-default-search-params (Ch 11) / search-validator-adapters (Ch 12, Zod/Valibot/ArkType).
  • Building modal-over-list UI, unsaved-changes guards, scroll restoration, or native page-transition animation -> location-masking / navigation-blocking / scroll-restoration / view-transitions (Ch 13-16).
  • Need a login-gated section of the app -> authenticated-routes (Ch 17).
  • Fetching data with TanStack Query, tRPC, or animating with Framer Motion, or building an i18n app -> Ch 18-21.
  • Splitting the router across a pnpm/turborepo workspace -> router-monorepo-simple (Ch 22), progressing to lazy loading (Ch 23) and a shared query package (Ch 24).

Full decision table and more detail: cheatsheet.md.

Chapter Index

Quickstart & Basics

#TitleDemonstrates
ch001Quickstart (File-Based Routing)Minimal file-based route tree, routeTree.gen.ts, RouterProvider setup
ch002Quickstart (Code-Based Routing)Same minimal app with routes defined inline via createRoute, no codegen
ch003Basic Routing (File-Based)Nested layouts, pathless layout routes, $postId dynamic param route
ch004Basic Routing (Code-Based)Code-based tree with a .lazy.tsx split component file

Kitchen Sink (Full-Featured Demo)

#TitleDemonstrates
ch005Kitchen Sink (Full-Featured Demo)Auth-gated dashboard, invoices, route groups, nested pathless layouts
ch006Kitchen Sink with React QuerySame reference app with TanStack Query queryOptions driving loaders

Rendering & Data

#TitleDemonstrates
ch007SSR (File-Based)Server-side rendering entry points, router context for <head>
ch008SSR with StreamingStreaming SSR response so deferred loader data flushes incrementally
ch009Deferred Datadefer() + <Await> for non-blocking slow loader data
ch010Large Route TreesCode-generated large route tree, scale considerations

Search Params & Validation

#TitleDemonstrates
ch011Default Search ParamsFallback values when a search param is absent from the URL
ch012Search Param Validator AdaptersSame route validated via Zod, Valibot, and ArkType adapters

Navigation & UX

#TitleDemonstrates
ch013Location MaskingDisplaying a different URL than the internally matched route
ch014Navigation BlockinguseBlocker guarding against unsaved-change navigation
ch015Scroll RestorationAutomatic scroll position save/restore across navigations
ch016View TransitionsNative View Transitions API wired into route navigation

Auth

#TitleDemonstrates
ch017Authenticated RoutesAuth guard via pathless layout route + beforeLoad redirect

Third-Party Integrations

#TitleDemonstrates
ch018TanStack Query Loader IntegrationqueryOptions shared between route loader and component
ch019tRPC + React Query IntegrationEnd-to-end typed tRPC calls inside route loaders
ch020Framer Motion Page TransitionsAnimating route enter/exit with Framer Motion
ch021i18n with ParaglideInternationalized routes with the Paraglide JS library

Monorepo Setups

#TitleDemonstrates
ch022Monorepo Setup (Simple)Router/feature/app split across pnpm workspace packages
ch023Monorepo Setup with Lazy LoadingSame split with lazy-loaded route components across packages
ch024Monorepo Setup with React QuerySame split with a dedicated post-query package

Supporting Files