Router

Try it in 3 steps

1. 1

   Prepare the pinned packages

   Requires Node.js 20.19 or later and npm. Create a temporary project pinned to React Router 1.170.41.

   demo=$(mktemp -d "${TMPDIR:-/tmp}/tanstack-router.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @tanstack/react-router@1.170.41 react@19.2.0 react-dom@19.2.0Copy
2. 2

   Define a typed route and search value

   Create a /products route tree that converts the page search value to a number, starting memory history at page=2.

   printf '%s\n' 'import { createRootRoute, createRoute, createRouter } from '\''@tanstack/react-router'\''' 'import { createMemoryHistory } from '\''@tanstack/history'\''' 'const root=createRootRoute()' 'const products=createRoute({getParentRoute:()=>root,path:'\''/products'\'',validateSearch:s=>({page:Number(s.page??1)})})' 'const router=createRouter({routeTree:root.addChildren([products]),history:createMemoryHistory({initialEntries:['\''/products?page=2'\'']})})' 'await router.load()' 'console.log(`${router.state.location.pathname} page=${router.state.location.search.page}`)' 'const next=router.buildLocation({to:'\''/products'\'',search:{page:3}})' 'console.log(`${next.pathname} page=${next.search.page}`)' > demo.mjsCopy
3. 3

   Verify the current and next locations

   Require the current page=2 location followed by the page=3 location built for typed navigation.

   test "$(node demo.mjs)" = $'/products page=2\n/products page=3'Copy

Built with

• TypeScript
• React
• JavaScript

Categories and tags

GitHub data

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Explore next

• Redux61,484 Stars

  3 shared tag(s) · Same language

  make shared-state updates explicit with stores/actions/reducers, while modern code uses Toolkit

  TypeScript
• Zustand58,786 Stars

  3 shared tag(s) · Same language

  manage React state with provider-free hook stores and subscribe through selectors

  TypeScript
• Expo52,566 Stars

  3 shared tag(s) · Same language

  build React Native apps for Android, iOS, and web from one project model

  TypeScript
• TanStack Query50,394 Stars

  3 shared tag(s) · Same language

  Manage fetching, caching, refetching, and mutations for remote server state outside local UI-state code

  TypeScript
• Virtual7,128 Stars

  3 shared tag(s) · Same language

  A headless virtualizer that calculates only the items near the viewport to reduce rendering work for long lists

  TypeScript
• Markuplint623 Stars

  3 shared tag(s) · Same language

  lint markup against HTML and ARIA rules across HTML, React, Vue, Svelte, and other templates

  TypeScript