skills.rest
aashahin
aashahinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-router

Implements type-safe routing with search params and data loading for React applications.

Updated Jun 22, 2026
Search Tags:#typescript#react#routing#data loading#tanstack-router#file-based routing#search params
One-click install
npx skills add https://github.com/aashahin/ai-skills --skill tanstack-router-aashahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-router
Source: https://github.com/aashahin/ai-skills/tree/main/tanstack-router
Command: npx skills add https://github.com/aashahin/ai-skills --skill tanstack-router-aashahin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building React applications with type-safe navigation, validated URL search parameters, and route-level data loading requires significant boilerplate and manual type wiring, often leading to runtime errors and stale data. ## Core Features & Use Cases - File-Based Routing: Automatically generate route trees from file structure using the Vite plugin, with conventions for dynamic params, pathless layouts, and catch-all routes. - Type-Safe Search Params & Loaders: Validate search parameters with Zod or custom validators, and load route data with loaders that integrate directly with TanStack Query. - Authentication & Navigation Guards: Protect routes using beforeLoad hooks with redirects, and block navigation on unsaved forms with useBlocker. - Use Case: Build a dashboard app where the /posts route validates page and filter search params, preloads data on link hover, and redirects unauthenticated users to /login. ## Quick Start Set up TanStack Router in my React Vite project with file-based routing and a posts route that validates search params and loads data with a loader.

Frequently Asked Questions about tanstack-router

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

FAQPage Schema
How do I set up file-based routing with TanStack Router?▼

Install @tanstack/react-router and add TanStackRouterVite() from @tanstack/router-plugin to your Vite config plugins. The plugin generates the route tree automatically from your routes directory using file naming conventions like $postId.tsx for dynamic params.

How to validate search params in TanStack Router?▼

Use the validateSearch option on a route with a Zod schema or a custom function that parses the raw search object. The validated result is fully typed and accessible via Route.useSearch() or useSearch({ from: '/posts' }).

Does TanStack Router work with TanStack Query?▼

Yes, route loaders can call queryClient.ensureQueryData with queryOptions to populate the cache before rendering. Components then use useSuspenseQuery with the same options for reactive updates without refetching fresh data.

How do I protect routes with authentication in TanStack Router?▼

Use the beforeLoad hook on a pathless layout route like _authenticated to check context.auth and throw a redirect to /login when unauthenticated. This prevents protected components from rendering before the check completes.

Why is my TanStack Router loader not refetching when search params change?▼

Loaders do not automatically re-run when search params change unless you declare loaderDeps. Return the relevant search values from loaderDeps so the router re-executes the loader whenever those dependencies change.

Related Skills

Explore More Software Engineering Skills→
dnnyngyendnnyngyen
332

webapp-building

Scaffold React web applications with TypeScript, Vite, Tailwind CSS, and shadcn/ui.

Community
Intermediate
compozycompozy
2.5k

tanstack-start-best-practices

Apply TanStack Start best practices to build robust full-stack React apps.

Official
Advanced
captjay98captjay98

TanStack Query

Manage React mutations and cache invalidation with TanStack Query.

Community
Advanced
cometchatcometchat
74

cometchat-nextjs-patterns

Integrate CometChat into Next.js 13+ apps with SSR-safe provider patterns.

Official
Advanced