TanStack
TanStack

Router

The route tree is the application contract.

Define routes once, then let TypeScript carry paths, params, search state, loaders, links, and boundaries through every navigation.

Docs
generated route contract
route filesgenerated

routeTree.gen.ts

contract updated

routes/_app.invoices.$invoiceId.tsx

path: '/invoices/$invoiceId'

params: { invoiceId: string }

search: { tab: "activity" | "details" }

link

<Link to="/invoices/$invoiceId" params={{ invoiceId }} />

loader

invoiceQuery(params.invoiceId)

read

Route.useParams().invoiceId

240.1Mtotal downloads22,691,999weekly downloads14,832GitHub stars
validated search state

/docs?page=2&q=router&sort=stars

q
router
page
2
sort
stars
Typed state is now bookmarkable, shareable, and safe to consume in loaders and components.

URL state

The URL is a state manager, not a string bucket.

Search params are parsed, validated, inherited, and typed. Filters, pagination, and tabs survive refreshes, back navigation, bookmarks, and shared links without hand-written serialization.

Preloading

Navigation can begin before the click.

Intent, viewport, and render strategies can preload route code and data. By the time navigation commits, the next screen can already be waiting.

intent trace
  1. 1

    match

    Route and dependencies known

  2. 2

    preload

    Code and loader start

  3. 3

    navigate

    Fresh result promoted

One contract

Types survive the whole trip.

The destination, matched route, loader dependencies, and rendered data all derive from the same route definition. Refactors fail in the editor instead of after deployment.

  1. 01

    Link

    to + params + search

    Navigation autocompletes against the route tree.

  2. 02

    Match

    beforeLoad({ params })

    Path, search, and inherited context narrow together.

  3. 03

    Load

    loader({ deps })

    Typed dependencies start before the component renders.

  4. 04

    Render

    Route.useLoaderData()

    The component receives the exact loader result.

Choose the boundary

Use Router for the app. Add Start when the app needs a server.

Router is the complete client-first application model. Start preserves that route tree and adds full-document rendering, server functions, server routes, middleware, and deployable server output.

TanStack Router

Client-first application routing

Typed navigation, URL state, route loaders, preloading, caching, code splitting, and route-owned boundaries.

TanStack Start

The same routes, with a server

Keep Router's app model, then add SSR, streaming, typed server work, middleware, and hosting output.