# TanStack Router: Type-Safe Routing for React and Full-Stack Apps

> TanStack Router is a client-first, server-capable router for the web that makes routes, params and search params type-safe, and TanStack Start layers full-document SSR and server functions on top of it. The trade-off is a heavier type surface and a package set that is still moving.

**TanStack/router** — 🤖 A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).

- Repository: https://github.com/TanStack/router
- Website: https://tanstack.com/router
- Stars: 15,135 · Forks: 1,870
- Language: TypeScript
- License: MIT
- Published: 2026-09-21 · Updated: 2026-09-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/tanstack-router

## Who TanStack Router Is Actually For

The README calls it "a modern router designed for type safety, data-driven navigation, and seamless developer experience", and lists four capabilities: end-to-end type safety across routes, params and loaders; schema-driven search params with validation; built-in caching, prefetching and invalidation; and nested layouts, transitions and error boundaries. That list is the product. If your application has URLs with query strings that carry filters, pagination or view state, the schema-driven search param layer is the part that changes how you work, because the URL stops being a string you parse by hand and becomes a typed object the router validates.

The description says the project is client-first but server-capable, for React "and more". The examples directory confirms the scope: examples/react, examples/solid and examples/vue sit side by side in the repository. TanStack Start, shown in the second half of the README, is the full-stack framework built on Router, aimed at server rendering, streaming and deployment-ready builds. So there are two adoption levels. Router alone is a client-side library you drop into an existing React app. Start is a framework decision that touches your build, your server entry and your deployment target.

This is not a router for someone who wants a single file of route definitions and nothing else. The type safety comes from a generated route tree, and the repository layout reflects that: there is a packages directory, a docs directory, an e2e directory and a benchmarks directory, all driven from a pnpm workspace. You are buying into a toolchain, not a helper function.

## How the Type Safety and Search Param Validation Work

The mechanism the README describes is end-to-end type safety over routes, params and loaders, plus schema-driven search params with validation. In practice that means route definitions are the source of truth, and the types for a route's path parameters and its search parameters are derived from those definitions rather than written by hand. A loader attached to a route is typed against the route it belongs to, so a mismatch between what a loader returns and what the component reads is a compile error rather than a runtime undefined.

The search param layer is the more distinctive half. Instead of reading the query string and coercing values yourself, you declare a schema and the router validates incoming search params against it. That moves a class of bugs from production to the type checker and to validation at navigation time. The cost is that search params are no longer free-form: every param you care about has to be described somewhere, and the schema becomes part of your route contract.

The other mechanism named in the README is caching, prefetching and invalidation built into the router, alongside nested layouts, transitions and error boundaries. Prefetching tied to route navigation means the router decides when to start loading data for a route the user is likely to visit. That is a behavioural change from routers that only fetch on mount, and it interacts with whatever data layer you already use. The README does not document how the cache is keyed or how invalidation is scoped, so that detail has to come from the docs site at tanstack.com/router rather than from the repository front page.

TanStack Start, described as "a full-stack framework built on Router", adds full-document SSR and streaming, server functions with end-to-end type safety, and deployment-ready bundling and builds. Server functions are the piece that extends the same type-safety promise across the network boundary: a function called from the client is typed as if it were local.

## Installing TanStack Router and Writing a First Typed Route

The README does not include install steps. It points to the Router docs at https://tanstack.com/router and the Start docs at https://tanstack.com/start, and the package name visible in the repository badges is @tanstack/react-router. The CONTRIBUTING.md file is the place the README sends contributors for setup instructions. Because the README gives no command, the block below uses only the package name that appears in the repository and the package manager declared in the root package.json, which is pnpm@11.21.0 with an engines constraint of pnpm >=11.21.0.

```bash
pnpm add @tanstack/react-router
```

That installs the React binding. The repository also contains examples/react, examples/solid and examples/vue, so the equivalent packages exist for those frameworks, but the README only names @tanstack/react-router explicitly, and the recent release list shows @tanstack/solid-start@2.0.0-rc.8 and @tanstack/solid-start-server@2.0.0-rc.8 published on 2026-09-17.

For the full-stack path, the README treats TanStack Start as a separate framework rather than a plugin. It advertises full-document SSR and streaming, server functions, and deployment-ready bundling. The repository's examples directory is the practical reference: examples/react is where a working application lives, and the docs site is where the current API is described. Since the README does not print a route definition, the honest first step is to clone the example that matches your framework and read its route files rather than to copy a snippet from a blog post that may predate the current release.

One concrete thing to check before you write code: the root package.json runs its own test pipeline through nx with targets named test:eslint, test:unit, test:e2e, test:types, test:build and build. The presence of a dedicated test:types target tells you type checking is treated as a first-class gate in this repository, which is consistent with the library's pitch. Expect the same in your own project.

## Where TanStack Router Gets in the Way

The strongest argument against it is the same as the argument for it. Type safety across routes, params, loaders and search params requires the types to be generated and checked, and that means a build step and a type-check step that a plain client router does not have. On a large route tree, type checking is work your CI has to do on every change. The repository's own test:types target is evidence that this cost is real enough to be automated rather than incidental.

The second limitation is scope creep by design. Router alone is a library. Start is a framework with SSR, streaming, server functions and bundling. If you adopt Start, you are choosing a rendering and deployment model, not just a routing API. That is a much harder decision to reverse than swapping a client router, because server functions and SSR change where your code runs.

The third is release-channel risk. The recent releases show @tanstack/solid-start and @tanstack/solid-start-server at version 2.0.0-rc.8, published 2026-09-17, alongside a general release tagged release-2026-09-17-1834. Release candidates are not the same as stable versions, and the README does not describe a support policy for the RC line. If your project depends on the Solid Start packages, you are tracking a pre-1.0-style channel regardless of how mature the React router is.

Finally, search param validation is a constraint as much as a feature. Every meaningful query param needs a schema entry, and params you do not model are not protected. Teams that treat the URL as an open extension point, where marketing or analytics appends arbitrary parameters, will find that the validation layer needs deliberate handling for anything outside the declared schema. The README does not document pass-through behaviour for undeclared params, so verify it against the docs before relying on it.

## TanStack Router Compared with React Router

React Router is the obvious alternative and the difference is philosophical rather than cosmetic. React Router's core is a matching and navigation library; types for params and search params are something you add, and query string parsing is left to you or to a helper. TanStack Router inverts that: the route definition is the type source, and search params are declared against a schema and validated by the router.

The practical consequence is where errors surface. With React Router, a malformed search param typically becomes a runtime problem in the component that reads it. With TanStack Router, the README's claim of schema-driven search params with validation moves that failure earlier, to validation at navigation time and to the type checker. If your app has few query params, that benefit is small and the added machinery is hard to justify. If your app is a dashboard or a search interface where the URL is the state container, the trade flips.

The second difference is the data layer. TanStack Router advertises built-in caching, prefetching and invalidation, and TanStack Start adds server functions with end-to-end type safety. React Router leaves caching to a separate data library. Neither approach is strictly better, but they produce different code: with TanStack, route loaders and the router cache are the organizing idea, and you should be prepared to let them own data fetching for routed screens rather than layering a second cache on top.

The third difference is framework reach. The repository ships examples for React, Solid and Vue, and the release list shows dedicated Solid Start server packages. React Router's centre of gravity is React. If you are on React only, that difference is irrelevant; if you maintain more than one frontend stack, it is not.

## Maintenance, Licence and Upgrade Cost

The repository is not archived, and the last push was on 2026-09-18. The most recent release listed is dated 2026-09-17, so the project is being published to on a short cadence. That cadence has a cost: frequent releases mean frequent upgrade decisions, and the release list shows multiple packages versioned independently, including @tanstack/solid-start and @tanstack/solid-start-server moving together at 2.0.0-rc.8. Independent versioning across a package set means a router upgrade and a start upgrade are not necessarily one action.

The licence is MIT, which is permissive and imposes no copyleft obligation on your application. That is the whole of what can be said from the repository; questions about attribution, patents or compatibility with your organisation's policy are for your own review, not for this article.

The upgrade cost is dominated by the type surface. Because routes, params and loaders are typed together, a change in the router's type signatures can produce a large number of compile errors across your route tree even when runtime behaviour is unchanged. The repository's own pipeline treats type checking as a separate target from unit and e2e tests, which is a reasonable model to copy: run type checks on their own so a type-only regression is distinguishable from a behavioural one. Note also that the root package.json pins the toolchain, declaring pnpm@11.21.0 and requiring pnpm >=11.21.0, so contributors on older pnpm versions will need to upgrade before the workspace installs.

## Conclusion

Adopt TanStack Router if your team writes TypeScript and wants route params and search params checked at compile time, and consider TanStack Start only if you accept that its Solid packages are still at 2.0.0-rc.8 as of the release dated 2026-09-17. Skip it if you want a minimal router with no build-time code generation or type-checking step. Before committing, verify that the generated route tree fits your build pipeline and that the release channel you install matches the Start packages you depend on.

## FAQ

### What is TanStack Router used for?

It is a router for the web with end-to-end type safety across routes, params and loaders, schema-driven search params with validation, and built-in caching, prefetching and invalidation. TanStack Start builds on it to add full-document SSR, streaming and server functions.

### Which frameworks does TanStack Router support?

The repository description says React and more, and the examples directory contains examples/react, examples/solid and examples/vue. The package named in the repository badges is @tanstack/react-router.

### Is TanStack Router the same as TanStack Start?

No. The README describes Start as a full-stack framework built on Router, adding full-document SSR and streaming, server functions and deployment-ready bundling on top of what Router already provides.

### What licence does TanStack Router use?

The repository licence is MIT.

## Sources

- [License: MIT](https://github.com/TanStack/router/blob/main/LICENSE)
- [Project website](https://tanstack.com/router)
- [README](https://github.com/TanStack/router/blob/main/README.md)
- [Releases](https://github.com/TanStack/router/releases)
- [TanStack/router on GitHub](https://github.com/TanStack/router)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/tanstack-router