📁 tanstack/router

A powerful React router for client-side and full-stack react applications. Fully type-safe APIs, first-class search-params for managing state in the URL and seamless integration with the existing React ecosystem.

Get Started

88888888

NPM Downloads 12,249

Stars on Github

629

Contributors on GitHub

25,207

Dependents on GitHub

Just a quick look...

ReactSolid

import { createRootRoute, createRoute, createRouter, RouterProvider } from '@tanstack/react-router'

const rootRoute = createRootRoute()
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <div>Hello World</div>,
})
const routeTree = rootRoute.addChildren([indexRoute])
const router = createRouter({ routeTree })

export default function App() {
  return <RouterProvider router={router} />
}

import { createRootRoute, createRoute, createRouter, RouterProvider } from '@tanstack/react-router'

const rootRoute = createRootRoute()
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <div>Hello World</div>,
})
const routeTree = rootRoute.addChildren([indexRoute])
const router = createRouter({ routeTree })

export default function App() {
  return <RouterProvider router={router} />
}

Get Started

Typesafe & powerful, yet familiarly simple

TanStack Router builds on modern routing patterns made popular by other tools, but has been re-engineered from the ground up to be 100% typesafe without compromising on DX. You can have your cake and eat it too!

Built-in Data Fetching with Caching

Hoist your data fetching and avoid waterfalls with TanStack Router's loader API and get instant navigations with built-in caching and automatic preloading. Need something more custom? Router's API is designed to work with your favorite client-side cache libraries!

Search Param APIs to make your state-manager jealous

Instead of throwing you to the URLSearchParam wolves, TanStack Router outfits you with state-manager-grade search param APIs. With schemas, validation, full type-safety and pre/post manipulation, you can manage your state in the URL and easily sync it to your state-manager of choice.

Partners

Router You?

We're looking for TanStack Router Partners to join our mission! Partner with us to push the boundaries of TanStack Router and build amazing things together.

Let's chat

View Previous Partners →

Feature Rich and Lightweight

100% Typesafe Parallel Route Loaders 1st-class Search Param APIs Nested/Layout Routes Lightweight (12kb) Suspense + Transitions Strict Navigation Auto-completed Paths Search Param Schemas Search Param Validation Search Param Parsing + Serialization Search Param Pre/Post Processing Structural Sharing Automatic Prefetching Asynchronous Elements Pending Elements Error Boundaries