tanstack-router

File-based routing in React maps route files directly to the filesystem using createFileRoute. You create a routes directory, define index and dynamic parameter files, and the system generates type-safe route definitions for predictable navigation.

Type-safe routing infers TypeScript types for dynamic parameters like $userId directly from the file name. Nested layouts are managed through file nesting conventions, allowing shared UI wrappers across multiple routes without manual type casting.

The best way to load data before rendering a route is using route loaders. Loaders fetch data asynchronously during navigation, passing typed data directly to the route component to ensure the UI is ready before painting.

Yes, you can optimize React performance by using route.lazy.tsx files for code-splitting. Programmatic preloading fetches data and code chunks before navigation completes, reducing load times during user transitions.

Yes, TypeScript is required to implement type-safe file-based routing. The routing mechanism relies on TypeScript to infer types for parameters, navigate programmatically, and ensure route definitions and data loading are predictable.

Use file-based routing when building scalable applications with complex nested structures, shared layouts, and dynamic pages. It enforces predictable route definitions mapped to the filesystem, reducing manual configuration errors in large React projects.