skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

virtual-file-routes

Build explicit route trees for TanStack Router projects.

14.9k|1.8k|Updated Jan 14, 2019
Search Tags:#typescript#tanstack-router#plugin-integration#programmatic-routing#virtual-file-routes#route-trees#subtree-config
One-click install
npx skills add https://github.com/TanStack/router --skill virtual-file-routes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: virtual-file-routes
Source: https://github.com/TanStack/router/tree/main/packages/virtual-file-routes/skills/virtual-file-routes
Command: npx skills add https://github.com/TanStack/router --skill virtual-file-routes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build route trees programmatically instead of relying on filesystem conventions, giving explicit control over routing structures.

Core Features & Use Cases

  • Exposes APIs like rootRoute, index, route, layout, physical, and defineVirtualSubtreeConfig to compose complex route trees.
  • Enables mixing virtual and file-based routes and subtree configurations inside routing directories.
  • Integrates with TanStack Router via the plugin's virtualRouteConfig option for seamless loading.

Quick Start

Define the routes using rootRoute and the composition helpers, then connect the config to the TanStack Router plugin.

Frequently Asked Questions about virtual-file-routes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build programmatic route trees in TanStack Router instead of using file-based routing?▼

Mix virtual and file-based routes in TanStack Router by using defineVirtualSubtreeConfig alongside composition helpers. This enables subtree configurations inside routing directories, allowing you to blend filesystem conventions with explicit programmatic route definitions.

How do I connect a virtual file route config to the TanStack Router plugin?▼

Connect a virtual file route config to the TanStack Router plugin by defining routes with composition helpers, then passing the configuration to the plugin's virtualRouteConfig option. This integrates the programmatic route tree for seamless loading.

What is defineVirtualSubtreeConfig used for when configuring route trees?▼

defineVirtualSubtreeConfig is used to configure explicit subtrees within programmatic route trees. It allows you to define precise subtree configurations that mix virtual and physical routes, replacing default filesystem-based routing conventions in TanStack Router.

Does TanStack Router support defining physical routes within a virtual route tree?▼

TanStack Router supports defining physical routes within a virtual route tree using the physical API alongside rootRoute and layout helpers. This allows you to explicitly mix virtual and physical route definitions for precise routing control.

Related Skills

Explore More Software Engineering Skills→
cill-i-amcill-i-am

virtual-file-routes

Build programmatic route trees with TanStack Router helpers.

Community
Intermediate
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
jezwebjezweb
961

TanStack Router

Generate typed file-based routes with TanStack Router for React SPAs.

Community
Intermediate
rezicsrezics
6

virtual-file-routes

Build programmatic route trees for TanStack Router with virtual file routes.

Official
Intermediate