{"enrichment":{"faq":[{"a":"TanStack Router provides automatic file-based routing similar to Next.js for React SPAs. Create a file structure in your routes directory, and TanStack Router generates type-safe routes automatically. Use the Vite plugin in your config to enable code generation. Each route file exports a Route object with loaders, components, and nested children. TypeScript validates all route parameters and navigation at compile time, eliminating runtime routing errors.","q":"How do I set up type-safe file-based routing in a React SPA with TanStack Router?"},{"a":"TanStack Router's Vite plugin errors typically occur from missing configuration or incorrect setup. Ensure the plugin is added to your vite.config.ts with the correct routes directory path. Verify that your route files follow the naming convention and export valid Route objects. Check that devtools are properly configured if you're seeing 'devtools not found' errors. Clear your build cache and restart the dev server if changes aren't detected.","q":"What is the tanstack router vite plugin error and how do I fix it?"},{"a":"TanStack Router uses route loaders to fetch data before rendering components. In your route definition, add a loader function that uses TanStack Query to fetch data. The loader runs before the route component mounts, ensuring data is available. Use the useLoaderData hook to access fetched data in your component. This pattern prevents loading states in components and enables prefetching by triggering loaders on link hover.","q":"How does TanStack Router integrate with TanStack Query for data loading?"},{"a":"Yes, TanStack Router has first-class support for Cloudflare Workers deployment. It handles client-side routing without requiring server-side route matching. Configure your build to output a static bundle compatible with Workers. Use the appropriate adapter or deployment configuration for Cloudflare. TanStack Router's type-safe routing works seamlessly in the Workers environment, enabling full SPA functionality on the edge.","q":"Can I deploy a React app with TanStack Router to Cloudflare Workers?"},{"a":"TanStack Router offers stronger TypeScript support than React Router. Convert your route definitions to TanStack Router's file-based structure, replacing React Router's JSX route declarations. Update loaders to use TanStack Router's loader pattern instead of React Router's loader functions. Migrate useParams and useSearchParams to TanStack Router's type-safe equivalents. The migration improves type safety and enables automatic code generation for your routes.","q":"How do I migrate from React Router to TanStack Router with TypeScript?"},{"a":"TanStack Router provides end-to-end type safety with automatic code generation from file-based routes, whereas React Router requires manual type definitions. TanStack Router includes built-in route loaders, devtools, and Cloudflare Workers support out of the box. It generates type-safe route parameters and search params automatically. React Router offers more flexibility but requires more manual configuration. TanStack Router is optimized for modern TypeScript-first development workflows.","q":"What are the key differences between TanStack Router and React Router for TypeScript projects?"}],"shadow_tags":["type-safe-navigation","file-based-routing","data-loading-patterns","spa-framework","edge-deployment","loader-functions","route-generation","typescript-routing","vite-integration","query-client-sync"],"summary_rewrite":"TanStack Router delivers type-safe, file-based routing for React single-page applications with automatic route generation and TypeScript validation. It includes built-in route loaders for data fetching, seamless TanStack Query integration, and first-class support for Cloudflare Workers deployment."},"files":[{"bytes":7559,"path":"plugins/tanstack-router/skills/tanstack-router/SKILL.md","sha256":"7daf35c10af7355d28c76469293d3d0a7598a6a24c8f51e542940e0605b4ad38","url":"https://skillfed.io/files/secondsky/claude-skills/tanstack-router/ad3fde82/SKILL.md"}],"id":"secondsky/claude-skills/tanstack-router","links":{"html":"https://skillfed.io/secondsky/claude-skills/tanstack-router","md":"https://skillfed.io/secondsky/claude-skills/tanstack-router.md","repo":"https://github.com/secondsky/claude-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":29,"language":"TypeScript","last_updated":"2026-07-25","license":"MIT","name":"tanstack-router","publisher":"secondsky","stars":196},"relations":{"similar":[{"id":"tanstack-skills/tanstack-skills/tanstack-router"},{"id":"oakoss/agent-skills/tanstack-router"},{"id":"secondsky/claude-skills/tanstack-start"},{"id":"jezweb/claude-skills/tanstack-start"},{"id":"joelhooks/joelclaw/tanstack-start"},{"id":"tanstack-skills/tanstack-skills/tanstack-start"},{"id":"oakoss/agent-skills/tanstack-start"},{"id":"secondsky/claude-skills/bun-tanstack-start"},{"id":"getsentry/sentry-for-ai/sentry-sdk-setup"},{"id":"binjuhor/shadcn-lar/frontend-development"}]},"slug":{"owner":"secondsky","repo":"claude-skills","skill":"tanstack-router"},"version":"ad3fde82"}