router

<img src="https://static.scarf.sh/a.png?x-pxid=d988eb79-b0fc-4a2b-8514-6a1ab932d188" />

🤖 Type-safe router w/ built-in caching & URL state management for React!

<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent"> <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack"> </a><a href="https://discord.com/invite/WrRKjPJ" target="\_parent"> <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" /> </a><a href="https://npmjs.com/package/@tanstack/react-router" target="\_parent"> <img alt="" src="https://img.shields.io/npm/dm/@tanstack/router.svg" /> </a><a href="https://bundlephobia.com/result?p=@tanstack/react-router" target="\_parent"> <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-router" /> </a><a href="#badge"> <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg"> </a><a href="https://github.com/tanstack/router/discussions"> <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" /> </a><a href="https://bestofjs.org/projects/router"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=tanstack%2Frouter%26since=daily" /></a><a href="https://github.com/tanstack/router" target="\_parent"> <img alt="" src="https://img.shields.io/github/stars/tanstack/router.svg?style=social&label=Star" /> </a><a href="https://twitter.com/tan_stack" target="\_parent"> <img alt="" src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social&label=Follow @TanStack" /> </a><a href="https://twitter.com/tannerlinsley" target="\_parent"> <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow @TannerLinsley" /> </a>

Enjoy this library? Try the entire TanStack! React Query, React Table, React Charts, React Virtual

Visit tanstack.com/router for docs, guides, API and more!

Partners

<div><a href="https://vercel.com?utm_source=tanstack"> <img alt="Vercel" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/vercel.svg" height="40" </a></div><br /> <div><a href="https://go.clerk.com/wOwHtuJ"> <img alt="Clerk" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/clerk.svg" height="40" </a></div><br /> <div><a href="https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable"> <img alt="AG Grid" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/ag-grid.svg" height="40" </a></div><br /> <div><a href="https://convex.dev?utm_source=tanstack"> <img alt="Convex" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/convex.svg" height="40" </a></div><br /> <div><a href="https://sentry.io?utm_source=tanstack"> <img alt="Sentry" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/sentry.svg" height="40" </a></div><br /> <div><a href="https://nozzle.io/?utm_source=tanstack&utm_campaign=tanstack"> <img alt="Nozzle.io" src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/nozzle.svg" height="40" </a></div><br />

Quick Features

• 100% TypeSafe
  • Route Defs
  • Navigation
  • Relative Navigation
  • Search Params
  • Path Params
  • Loaders
• 1st Class Search Params
  • Schemas + Validation
  • Parsing + Serialization
  • Immutable
  • Structural Sharing
  • Pre/Post Processing
• Built-in Caching
  • Stale-While-Revalidate
  • Max-Age
  • Auto Garbage Collection
  • Invalidation
• Prefetching
• Automatic Prefetching
• Transitions
• Error Boundaries
• Code Splitting
• Layout Routes
• Easy Integration w/ external caches and storage (eg. React Query, Apollo, SWR, RTKQuery)

Example Usage

To run example React projects with Tanstack Router, see CONTRIBUTING.md

<!-- Use the force, Luke!! -->