skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

react-router

Provide React bindings and setup patterns for TanStack Router type-safe routing.

14.9k|1.8k|Updated Jan 14, 2019
Search Tags:#react#routing#hooks#type-safety#bindings#tanstack-router#frontend-development
One-click install
npx skills add https://github.com/TanStack/router --skill react-router-tanstack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-router
Source: https://github.com/TanStack/router/tree/main/packages/react-router/skills/react-router
Command: npx skills add https://github.com/TanStack/router --skill react-router-tanstack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React apps often struggle to integrate TanStack Router with full type safety and ergonomic hooks. This skill provides React bindings, components, and setup patterns that make routing safer and easier to use.

Core Features & Use Cases

  • Type-safe routing across React components using generated types and inferred params.
  • Hooks & components: useRouter, useParams, useLoaderData, Link, Navigate, Outlet.
  • File-based routing setup: guides developers through creating root routes and route files for scalable apps.
  • SSR hydration patterns: supports SSR-friendly workflows and server/client boundaries.

Quick Start

Create a React app, install @tanstack/react-router, and configure the root route and file-based routes as shown.

Frequently Asked Questions about react-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 configuring a root route and file-based routes using generated types and inferred params. This approach applies React bindings to deliver end-to-end type safety for routes, matches, and navigation primitives.

What hooks and components are available for React routing?▼

Available React routing hooks and components include useRouter, useParams, useLoaderData, Link, Navigate, and Outlet. These primitives provide type-safe navigation and data loading capabilities within React frontend architectures.

How do I load data for a SPA using React router hooks?▼

SPA data loading with React router hooks is handled through useLoaderData and inferred params. This pattern integrates server/client boundaries to support SSR-friendly workflows and hydration during frontend development.

Does React routing support SSR hydration patterns?▼

Yes, React routing supports SSR hydration patterns by managing server and client boundaries. This ensures SSR-friendly workflows operate correctly when hydrating single-page applications during frontend rendering.

How do I integrate a Vite plugin for file-based routing?▼

Vite plugin integration for file-based routing is configured during project setup to generate route types. This dev tooling integration automatically scaffolds route files and applies generated types for scalable app architectures.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

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

Official
Intermediate
naviktnavikt

react-router-framework-mode

Configure React Router framework mode for routes, loaders, actions, and rendering strategies.

Official
Intermediate
jezwebjezweb
961

TanStack Router

Generate typed file-based routes with TanStack Router for React SPAs.

Community
Intermediate
AratKruglikAratKruglik
9

react-routing

Detect routing libraries in React projects and apply compatible routing patterns.

Community
Advanced