tanstack-router
TanStack Router
Distilled from TkDodo's blog, the TanStack blog, and the current docs. Targets @tanstack/react-router v1 (and TanStack Start, which builds on it).
Mental model
The router is a typed graph, not a string matcher. Every route registers its path, params, search schema, loader data, and context into one generated tree, and Link, useNavigate, redirect, useSearch, useParams, and useLoaderData all read their types back out of it. A wrong to, a missing param, or an unvalidated search key is a compile error, not a runtime 404.
Three things flow down the route tree, each with its own rules:
- Context — dependency injection. Built parent → child by
beforeLoad; children see everything their ancestors added. - Loader data — per-route, cached by the router's own SWR cache, keyed by params +
loaderDeps. - Search params — validated per route, inherited by links, and the correct home for state that should survive a reload or a shared URL.
A navigation is not one operation. Route matching, serial beforeLoad, parallel loaders, and the actual React commit are separate lifetimes: a superseded navigation loses the right to publish but its loader work keeps running and still lands in the cache, and preload work is shared with the navigation that follows it. Design loaders to be idempotent and cancellable rather than assuming one-navigation-one-run.