tanstack-router

File-based routing in React organizes scalable route trees by formalizing routes as files and folders under a routes directory. You define routes using createFileRoute, wire up a router with createRouter, and render nested layouts via RouterProvider.

Authentication guards and data fetching use beforeLoad guards and loaders within your route definitions. You configure these lifecycle functions alongside route context to block navigation or fetch API data before rendering the route component.

Yes, TypeScript is required to enforce type-safe routing patterns, frontmatter metadata, and route context. TanStack Router relies on TypeScript to validate loaders, beforeLoad guards, and type-safe navigation across complex route hierarchies.

The best way to structure public and private sections is using file-based routing with shared layouts and beforeLoad guards. You define route files for each section, apply authentication guards, and share layout components across the route hierarchy.

Route context failures often occur when frontmatter metadata is missing or loaders and beforeLoad guards are improperly configured. You must enforce TypeScript types and ensure route context is correctly passed through your createFileRoute definitions.