tanstack-router

Install @tanstack/react-router and add the TanStackRouterVite plugin from @tanstack/router-plugin to your vite.config.ts. Files in your routes directory then automatically generate the route tree using conventions like index.tsx, $param.tsx, and __root.tsx.

Use the validateSearch option on a route with a Zod schema or a manual parser function. Validated search params become fully typed and are accessible via Route.useSearch() or the useSearch hook.

Yes, TanStack Router integrates with TanStack Query through router context. Pass queryClient in the router context and call queryClient.ensureQueryData inside route loaders, then use useSuspenseQuery in components for reactive updates.

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 before the check completes.

Loaders do not automatically re-run when search params change unless you declare loaderDeps. Add loaderDeps returning the relevant search params so the loader re-executes whenever those values change.

With file-based routing, create a .lazy.tsx companion file using createLazyFileRoute for the component, pendingComponent, and errorComponent. Keep loaders and beforeLoad in the main route file so they load eagerly.