tanstack-router

Install @tanstack/react-router and the @tanstack/router-plugin dev dependency, add tanstackRouter({ target: 'react', autoCodeSplitting: true }) before react() in vite.config.ts, then create the router with createRouter and the generated routeTree, add the Register declaration merge, and render RouterProvider.

Use the route's validateSearch option with a schema. For Zod v3 wrap the schema with zodValidator from @tanstack/zod-adapter; for Zod v4 pass the schema directly. Use .catch(default) so malformed URLs fall back instead of throwing.

TanStack Router provides end-to-end type safety where the route tree is the type source, plus first-class validated search params and loaders. This skill covers only TanStack Router; React Router and Remix are a different router and out of scope.

A loader does not re-run when search params change unless the dependency is declared in loaderDeps. Add loaderDeps: ({ search }) => ({ page: search.page }) so the loader re-executes when those params change.

Build an in-memory router with createMemoryHistory({ initialEntries: [path] }), pass it to createRouter with your route tree, and render RouterProvider. Assert with Testing Library's findBy* queries since loaders resolve asynchronously.

Yes. Call queryClient.ensureQueryData(queryOptions) in the route loader via router context, then read the same queryOptions with useSuspenseQuery in the component for a cache hit. Set defaultPreloadStaleTime: 0 so Query owns freshness.