TanStack Router best practices

Use when defining routes, navigation, loaders, search params, and type-safe routing.

Route tree

• Keep the route module API (createFileRoute, Route.useLoaderData, etc.) consistent with the rest of the app.
• Use layouts for shared chrome; avoid copying the same wrapper in every leaf route.

Loaders

• Loaders should be fast and parallel; don’t chain sequential awaits when independent.
• Return minimal shapes the UI needs; map DTOs close to the route if it clarifies the view.
• Use typed loader results; let TypeScript flow to components via Route.useLoaderData().

Navigation

• Prefer <Link> / linkOptions / navigate() with typed to and params over stringly-typed URLs.
• After mutations, invalidate queries or navigate with intent (replace vs push) so back button behaves predictably.