react-router

Name: react-router
Availability: InStock
Author: TanStack

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

Ready to run

npx skills add https://github.com/TanStack/router --skill react-router-tanstack

💬 Prompt for ChatGPT / Claude Chat▼

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.