{"enrichment":{"faq":[{"a":"Tanstack Router delivers file-based routing for React with full type safety, route-level data loading, and search parameter validation. To set up Tanstack Router, install the package via npm, define your route structure using file-based conventions, and configure your router instance with your route tree. It handles code splitting automatically and integrates seamlessly with TanStack Query for efficient data management.","q":"What is Tanstack Router and how do I set it up?"},{"a":"Tanstack Router implements type safety by automatically inferring types for route parameters, search values, and loader data. Define your routes with typed parameters and search schemas, and Tanstack Router generates TypeScript types that ensure compile-time safety across your navigation calls. This prevents runtime errors and enables IDE autocomplete for all route-related operations throughout your application.","q":"How to use Tanstack Router for type-safe routing?"},{"a":"Tanstack Router differs from React Router by offering file-based routing, built-in type safety, route-level data loading, and search parameter validation. While React Router uses component-based route definitions, Tanstack Router provides automatic code splitting, preloading strategies, and framework-agnostic architecture. Tanstack Router is designed for modern applications requiring structured navigation with type inference for params and loader data.","q":"How does Tanstack Router compare to React Router?"},{"a":"Yes, Tanstack Router fully supports nested routes and automatic code splitting. Define nested route hierarchies using file-based routing conventions, and Tanstack Router automatically splits code at route boundaries for optimal performance. It also provides preloading strategies to load route chunks before navigation, enabling smooth transitions while maintaining efficient bundle sizes.","q":"Does Tanstack Router support nested routes and code splitting?"},{"a":"Tanstack Router supports migration from other routing libraries through its flexible configuration and framework-agnostic design. Map your existing routes to Tanstack Router's file-based structure, update route definitions to use typed parameters and search schemas, and leverage route-level data loading to replace previous data-fetching patterns. The migration path depends on your current routing library, but Tanstack Router's type safety and structured approach improve maintainability.","q":"Can I migrate from other routing libraries to Tanstack Router?"},{"a":"Best practices for Tanstack Router include organizing routes using file-based conventions for clarity, defining typed search parameters and route params upfront, leveraging route-level data loading instead of component-level fetching, and using preloading strategies for critical routes. Integrate Tanstack Router with TanStack Query for data management, validate search parameters at the router level, and use code splitting to optimize bundle sizes for better performance.","q":"What are best practices for Tanstack Router configuration?"}],"shadow_tags":["client-side-routing","type-safe-navigation","framework-agnostic","file-based-routing","route-management","spa-framework","query-handling","nested-routing"],"summary_rewrite":"Tanstack Router delivers file-based routing for React with full type safety, route-level data loading, and search parameter validation. It handles code splitting, preloading strategies, and integrates seamlessly with TanStack Query for efficient data management. Use it to build structured navigation with automatic type inference for params, search values, and loader data."},"gist":{"api_url":"https://skillfed.io/api/skills/oakoss/agent-skills/tanstack-router.json","as_of":"2026-03-02","description":"Tanstack Router provides type-safe, file-based routing for React apps with built-in data loading. npx skillfed install oakoss/agent-skills/tanstack-router","install":{"manual":["git clone https://github.com/oakoss/agent-skills","cp -r agent-skills ~/.claude/skills/tanstack-router"],"primary":"npx skillfed install oakoss/agent-skills/tanstack-router","version":"68346006"},"kind":"skill","mirror_url":"https://skillfed.io/oakoss/agent-skills/tanstack-router.md","similar":[{"id":"tanstack-skills/tanstack-skills/tanstack-router","name":"tanstack-router","publisher":"tanstack-skills/tanstack-skills","url":"https://skillfed.io/tanstack-skills/tanstack-skills/tanstack-router"},{"id":"DeckardGer/tanstack-agent-skills/tanstack-router","name":"Tanstack Router","publisher":"DeckardGer/tanstack-agent-skills","url":"https://skillfed.io/DeckardGer/tanstack-agent-skills/tanstack-router"},{"id":"oakoss/agent-skills/tanstack-start","name":"Tanstack Start","publisher":"oakoss/agent-skills","url":"https://skillfed.io/oakoss/agent-skills/tanstack-start"},{"id":"secondsky/claude-skills/tanstack-start","name":"tanstack-start","publisher":"secondsky/claude-skills","url":"https://skillfed.io/secondsky/claude-skills/tanstack-start"},{"id":"skilld-dev/vue-ecosystem-skills/tanstack-vue-router-skilld","name":"tanstack-vue-router-skilld","publisher":"skilld-dev/vue-ecosystem-skills","url":"https://skillfed.io/skilld-dev/vue-ecosystem-skills/tanstack-vue-router-skilld"}],"title":"Tanstack Router by oakoss: Set up and configure Tanstack \u2014 SkillFed","use":{"when":["Tanstack Router implements type safety by automatically inferring types for route parameters, search values, and loader data.","Tanstack Router differs from React Router by offering file-based routing, built-in type safety, route-level data loading."]},"what":{"lead":"Tanstack Router provides type-safe, file-based routing for React apps with built-in data loading, search params validation, and code splitting.","rest":"Tanstack Router delivers file-based routing for React with full type safety, route-level data loading, and search parameter validation. It handles code splitting, preloading strategies, and integrates seamlessly with TanStack Query for efficient data management. Use it to build structured navigation with automatic type inference for params, search values, and loader data."}},"id":"oakoss/agent-skills/tanstack-router","install":{"mode":"external","repo":"https://github.com/oakoss/agent-skills"},"links":{"html":"https://skillfed.io/oakoss/agent-skills/tanstack-router","md":"https://skillfed.io/oakoss/agent-skills/tanstack-router.md","repo":"https://github.com/oakoss/agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":5,"language":"Python","last_updated":"2026-03-02","license":null,"name":"Tanstack Router","publisher":"oakoss","stars":13},"relations":{"similar":[{"id":"tanstack-skills/tanstack-skills/tanstack-router"},{"id":"DeckardGer/tanstack-agent-skills/tanstack-router"},{"id":"oakoss/agent-skills/tanstack-start"},{"id":"secondsky/claude-skills/tanstack-start"},{"id":"skilld-dev/vue-ecosystem-skills/tanstack-vue-router-skilld"},{"id":"secondsky/claude-skills/tanstack-router"},{"id":"joelhooks/joelclaw/tanstack-start"},{"id":"DeckardGer/tanstack-agent-skills/tanstack-integration"},{"id":"pedronauck/skills/tanstack"},{"id":"oakoss/agent-skills/tanstack-query"}]},"slug":{"owner":"oakoss","repo":"agent-skills","skill":"tanstack-router"},"version":"68346006"}