tanstack-router
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.
TanStack Router provides type-safe file-based routing for React SPAs with route loaders and TanStack Query integration.
AI-generated summary based on this skill's SKILL.md
Install
secondsky/claude-skills/tanstack-router · repository language: TypeScript
git clone https://github.com/secondsky/claude-skills
cp -r claude-skills/plugins/tanstack-router/skills/tanstack-router ~/.claude/skills/tanstack-routerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up type-safe file-based routing in a React SPA with TanStack Router?
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.
What is the tanstack router vite plugin error and how do I fix it?
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.
How does TanStack Router integrate with TanStack Query for data loading?
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.
Can I deploy a React app with TanStack Router to Cloudflare Workers?
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.
How do I migrate from React Router to TanStack Router with TypeScript?
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.
What are the key differences between TanStack Router and React Router for TypeScript projects?
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.
SKILL.md
rendered from the published skill — quoted content, verbatim
TanStack Router Skill
Build type-safe, file-based routing for React SPAs with TanStack Router, optimized for Cloudflare Workers deployment.
When to Use This Skill
Auto-triggers when you mention: - "TanStack Router" or "type-safe routing" - "file-based routing" or "route configuration" - "React routing" with TypeScript emphasis - "route loaders" or "data loading in routes" - "Cloudflare Workers routing"
**Use this
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 5 files
plugins/tanstack-router/skills/tanstack-router/SKILL.md
plugins/tanstack-router/skills/tanstack-router/references/common-errors.md
plugins/tanstack-router/skills/tanstack-router/templates/package.json
plugins/tanstack-router/skills/tanstack-router/templates/route-examples.tsx
plugins/tanstack-router/skills/tanstack-router/templates/vite.config.ts