react-router

Install @tanstack/react-router and the @tanstack/router-plugin dev dependency, then add tanstackRouter({ target: 'react' }) to your Vite plugins before react(). Create a root route with createRootRoute, define route files with createFileRoute, and render RouterProvider with the generated routeTree.

Register your router instance via the Register interface using declare module '@tanstack/react-router'. After registration, Link, useNavigate, useSearch, and useParams gain full type inference for paths, params, and search schemas without any manual annotations.

No, they are completely different libraries with different APIs. TanStack Router is client-first with fully inferred types and loaders that run on the client by default, while react-router-dom uses a different route definition and data-loading model.

Loaders and beforeLoad are plain async functions, not React components, so hooks like useAuth cannot be called in them. Pass auth state through router context instead and read it via the context argument in beforeLoad.

Create the router once with a placeholder context value, then inject live auth state through RouterProvider's context prop inside an inner component that reads your auth hook. Never recreate the router on auth changes, as that resets caches and rebuilds the route tree.

The Await component for deferred loader data requires a React Suspense ancestor to provide a fallback UI. Wrap Await in a Suspense boundary with a fallback element so the deferred promise has somewhere to suspend while loading.