virtual-file-routes

Programmatic routing in TanStack Router is defined by composing a route tree using helpers like rootRoute, index, route, and layout to explicitly mount virtual routes alongside physical filesystem-based routes. This approach replaces file-based routing with a maintainable, composable route tree.

Yes, you can mix virtual and physical filesystem-based routes in React, Vue, or Solid apps by using the physical helper alongside virtual route helpers. This allows you to retain filesystem routing where needed while explicitly controlling other parts of the route tree programmatically.

Strong type inference for a virtual route subtree in TypeScript is achieved by using the defineVirtualSubtreeConfig helper. This configuration drives the TanStack Router plugin's virtualRouteConfig to ensure robust type checking across your programmatic route tree.

The best way to structure a TanStack Router layout programmatically is by using the layout helper to wrap child routes. You compose the tree by nesting index and route helpers within the layout, ensuring explicit control over your application's routing hierarchy.

Programmatic routing should be used over filesystem-based routing when you require explicit, maintainable, and composable control over your route tree. It is ideal for projects that need to dynamically mix virtual and physical routes rather than relying solely on file conventions.