tanstack-router

Install @tanstack/react-router and the @tanstack/router-plugin Vite plugin, then add TanStackRouterVite() to your Vite config. Files in your routes directory automatically generate the route tree using conventions like $param for dynamic segments and _prefix for pathless layouts.

Use the validateSearch option on a route with a Zod schema or a custom function that parses the raw search object. The validated result is fully typed and accessible via Route.useSearch() or useSearch({ from: routePath }).

Yes, pass the QueryClient through router context and call queryClient.ensureQueryData inside route loaders. Components can then use useSuspenseQuery with the same query options for reactive updates without refetching fresh data.

Use the beforeLoad hook on a pathless layout route like _authenticated to check auth state from router context and throw a redirect to the login page. This prevents protected content from rendering, unlike checks inside components.

Loaders only re-execute when their dependencies change, so you must declare loaderDeps returning the relevant search params. Without loaderDeps, the loader caches its result and ignores search param updates.

With file-based routing, split a route into a main file containing the loader and a .lazy.tsx file containing the component, pending, and error components. For code-based routes, call .lazy() on the route with a dynamic import.