skills.rest
guillempuche
guillempucheCOMMUNITY
Explore all skills by this author →
GitHub

react-router

Configure TanStack Router with Vite for type-safe React routing.

Updated Aug 27, 2026
Search Tags:#typescript#react#tanstack#hooks#navigation#router
One-click install
npx skills add https://github.com/guillempuche/engranatge --skill react-router-guillempuche
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-router
Source: https://github.com/guillempuche/engranatge/tree/main/docs/repos/tanstack-router/packages/react-router/skills/react-router
Command: npx skills add https://github.com/guillempuche/engranatge --skill react-router-guillempuche

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React developers need a type‑safe, client‑first routing solution that integrates seamlessly with modern React tooling and Vite.

Core Features & Use Cases

  • Fully typed router hooks such as useRouter, useNavigate, useSearch, and useParams.
  • Components like RouterProvider, Link, Outlet, and Navigate for declarative navigation.
  • File‑based route creation with automatic code‑splitting via the TanStack Router Vite plugin.
  • Advanced patterns including custom link components, context handling, and error boundaries. Use case: building a single‑page application where routes, data loading, and navigation are type‑checked throughout the codebase.

Quick Start

Use the react-router skill to set up a new TanStack Router React project with Vite and start navigating between pages.

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 single-page application?▼

Type-safe routing in a React single-page application is achieved by installing TanStack Router, configuring the Vite plugin for file-based routes, and using typed hooks like useRouter and useNavigate to ensure navigation is type-checked.

What is the best way to create file-based routes with automatic code-splitting in React?▼

File-based routes with automatic code-splitting in React are created by configuring the TanStack Router Vite plugin, which automatically generates route trees and splits code based on your file structure.

Does TanStack Router work with Vite and TypeScript for React navigation?▼

Yes, TanStack Router works with Vite and TypeScript for React navigation, providing fully typed router hooks such as useSearch and useParams, and declarative components like RouterProvider and Link.

How do I handle context and error boundaries when building React navigation?▼

React navigation context and error boundaries are handled using advanced TanStack Router patterns, allowing you to manage route context and catch routing errors declaratively within your component tree.

Can I use custom link components for declarative navigation in a React router?▼

Yes, you can use custom link components for declarative navigation in a React router by extending TanStack Router's Link component to fit your specific UI requirements while maintaining type safety.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

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

Official
Intermediate
7a336e6e7a336e6e
1

integrating-api

Implement a type-safe API client with TanStack Query and Axios/Fetch.

Community
Intermediate
calesthiocalesthio
46.2k

vercel-composition-patterns

Refactor React 19+ components from boolean props to compound component patterns.

Community
Intermediate
mambisimambisi

routing

Manage SPA routing with route guards, loaders, and client-side navigation in pocopine.

Community
Advanced