skills.rest
MichaelFrieze
MichaelFriezeCOMMUNITY
Explore all skills by this author →
Website𝕏@MichaelFriezeGitHub

tanstack-router

Creates type-safe file-based routes with validated search parameters and data loaders for React/Solid.

Updated Aug 27, 2026
Search Tags:#routing#type-safe#preloading#data-loading#react-router#search-params#file-based-routing
One-click install
npx skills add https://github.com/MichaelFrieze/riffatlas --skill tanstack-router-michaelfrieze
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-router
Source: https://github.com/MichaelFrieze/riffatlas/tree/main/.agents/skills/tanstack-router
Command: npx skills add https://github.com/MichaelFrieze/riffatlas --skill tanstack-router-michaelfrieze

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router eliminates the friction and risk of untyped, error-prone client-side navigation by providing fully type-safe routing with validated search parameters and structured data loading.

Core Features & Use Cases

  • File-based routing: Define routes from your filesystem structure to automatically build the route tree and reduce boilerplate.
  • Type-safe route params & search params: Validate and strongly type both path parameters and query/search parameters (including Zod-based schemas).
  • Integrated loaders, redirects, and head/meta: Load data per-route, control revalidation with loader dependencies, and manage not-found and error states cleanly.
  • Performance features: Use code splitting, preloading, scroll restoration, and router-level defaults for a smoother UX.
  • Ecosystem-friendly integration: Works seamlessly with TanStack Start, React ecosystem patterns, and router hooks for navigation and state.

Quick Start

Ask the AI to generate a type-safe file-based route that validates search params and loads data via a loader with a typed useLoaderData result for a page component.

Frequently Asked Questions about tanstack-router

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

FAQPage Schema
How do I implement type-safe routing with validated search params in React?▼

Type-safe routing with validated search params uses createFileRoute and validateSearch APIs to strongly type path parameters and query strings, preventing navigation and data-loading bugs in React applications. This ensures route parameters are validated at compile time.

What is the best way to load data per-route in a file-based routing structure?▼

Data loading per-route in a file-based routing structure uses integrated loader hooks and loaderDeps to fetch data before rendering. This approach controls revalidation with loader dependencies and provides typed useLoaderData results for page components.

Can I use TanStack Router for code splitting and preloading routes?▼

TanStack Router supports code splitting and preloading routes to improve application performance. It provides router-level defaults for scroll restoration and preloading strategies, ensuring a smoother UX across modern web apps built with React or Solid.

Does TanStack Router work with Solid applications or only React?▼

TanStack Router works with both React and Solid applications to provide type-safe routing and validated search parameter management. It applies to file-based routing, nested route trees, dynamic params, and loader-based data fetching across both frameworks.

How do I handle nested route trees and dynamic params without runtime navigation errors?▼

Nested route trees and dynamic params are handled using createRootRoute and createFileRoute APIs to build a strongly typed route tree. This eliminates friction and risk of untyped client-side navigation by validating path parameters before runtime.

What is the difference between react-router and a fully type-safe router?▼

A fully type-safe router eliminates untyped, error-prone client-side navigation by validating search parameters with schemas like Zod and structuring data loading with typed hooks. This prevents navigation bugs that standard untyped routing solutions do not catch.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

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

Official
Intermediate
CatOfJupit3rCatOfJupit3r
1

tanstack-query-integration

Integrate TanStack Query with oRPC for typed data fetching and caching.

Community
Advanced
compozycompozy
2.5k

tanstack

Provides TanStack patterns for data fetching, form validation, and routing in React applications.

Official
Advanced
JeromyJSmithJeromyJSmith
3

tanstack-router

Configure type-safe TanStack Router routes with validated params and loaders.

Community
Advanced