Getting Started with TanStack Router

TanStack Router is one of the few routers that treats type safety as a first-class concern rather than an afterthought. Every route, every search param, every loader return value is typed end-to-end — which means mismatches between what a route expects and what a link provides become compile-time errors, not runtime surprises.

The file-based routing mode is the easiest entry point. Drop a file in `src/routes` and the router picks it up automatically. The route tree is generated at build time, which is also where the TypeScript types are derived — so you never hand-write route definitions or type declarations.

Dynamic segments like `$slug` map directly to typed params you access via `Route.useParams()`. No casting, no runtime parsing. If the route doesn't exist the TypeScript compiler tells you before the browser does.

Loaders and search params follow the same pattern. Define a `validateSearch` schema with Zod, and every consumer of that route's search gets a typed object. Define a `loader` and its return type flows directly into `Route.useLoaderData()` in the component.

The DevTools panel is worth enabling early. It shows the full matched route tree for the current URL, the params, the pending state, and the preloaded routes — all of which makes understanding what the router is doing much faster than reading logs.

For this site I'm using TanStack Start, which adds SSR and server functions on top of TanStack Router. The transition from client-only to server-rendered is mostly transparent — the same file-based conventions apply, and the router handles hydration automatically.