tanstack-router-guide

File-based routing in TanStack Router maps URLs to TS/TSX files under src/routes to mirror your app structure. You create a root route and file-based routes, then wire up navigation using Link and useNavigate helpers.

Loaders in TanStack Router manage data loading and navigation by declaring loaders and loaderDeps to control data flow and transitions. This approach reduces boilerplate and navigation errors in React applications.

Protected routes and redirects in TanStack Router are implemented using beforeLoad guards and route context to enforce authentication and permissions. This secures protected sections of your React application.

TanStack Router supports type-safe navigation, route parameters, and search params to reduce navigation errors. It enforces type-safe routing in React applications using file-based routes and TypeScript.

The best way to build scalable, type-safe routing in React is using TanStack Router's file-based routes. This approach reduces boilerplate and navigation errors by mapping URLs to TS/TSX files under src/routes.

TanStack Router enforces YAML frontmatter with name and description in SKILL.md to maintain metadata consistency. It also supports optional scripts, references, and assets directories to extend functionality.