tanstack-router

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

Updated Apr 5, 2023
One-click install
npx skills add https://github.com/fcalell/dotfiles --skill tanstack-router-fcalell
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-router
Source: https://github.com/fcalell/dotfiles/tree/main/dot_claude/skills/tanstack-router
Command: npx skills add https://github.com/fcalell/dotfiles --skill tanstack-router-fcalell

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Type-safe, file-based routing for React apps with TanStack Router.

Core Features & Use Cases

  • Type-safe route definitions and navigation across protected and public areas
  • File-based routing mirrors the filesystem structure and supports dynamic segments and loaders
  • Protected routes via layout groups and route guards for authentication and permissions
  • Parameterized routes and search parameters enabling precise URL state control

Quick Start

Ask your AI to scaffold a TanStack Router-based route structure with protected layouts and dynamic segments.

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 type-safe routing in a React app?

Type-safe routing in a React app is set up by applying file-based route definitions that mirror the filesystem structure, enforcing type safety for dynamic segments and navigation across the project.

What is the best way to create protected routes for authentication in React?

Protected routes for authentication in React are created using layout groups and route guards, ensuring permissions are enforced before users can access protected sections or private pages.

How do I handle dynamic segments and search parameters for URL state control?

Dynamic segments and search parameters for URL state control are handled through parameterized routes, enabling precise navigation and data loading within type-safe route definitions.

Can I use file-based routing to scaffold admin panels and dashboards?

File-based routing can be used to scaffold admin panels and dashboards by mapping the filesystem structure to route layouts, applying loaders and guards for protected public views.

Does TanStack Router support type-safe loaders for parameterized routes?

TanStack Router supports type-safe loaders for parameterized routes, enforcing type validation on dynamic segments and search parameters during data fetching and navigation.