react-routing

Set up and manage React Router v6/v7 client-side routing with createBrowserRouter.

Updated Jun 23, 2026
One-click install
npx skills add https://github.com/jaballer/react-claude-skills --skill react-routing-jaballer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-routing
Source: https://github.com/jaballer/react-claude-skills/tree/main/react-routing
Command: npx skills add https://github.com/jaballer/react-claude-skills --skill react-routing-jaballer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-router-dom, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of setting up and managing client-side routing in React applications, leveraging React Router v6/v7, making it easy to handle multiple distinct screens and deep linking without the complexities of traditional multi-page applications.

Core Features & Use Cases

  • Routing Setup: Utilizes createBrowserRouter for defining routes and handling navigation.
  • Dynamic Parameters: Handles dynamic route parameters and nested routes with Outlet.
  • Data Loading: Provides guidance on using loaders and TanStack Query for efficient data fetching.
  • Error Handling: Covers best practices for error handling and 404 pages.
  • Use Case: Perfect for any React single-page application (SPA) that requires multiple screens, such as an e-commerce site or a content management system.

Quick Start

Set up client-side routing for your React app by using the createBrowserRouter from React Router v6/v7 to define your routes.

Frequently Asked Questions about react-routing

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

FAQPage Schema
How do I set up client-side routing in a React SPA?▼

Set up client-side routing in a React SPA by using the `createBrowserRouter` function from React Router v6/v7 to define your application's routes and handle navigation across multiple distinct screens.

How do I handle dynamic route parameters and nested routes in React Router?▼

Handle dynamic route parameters and nested routes in React Router by configuring your route definitions to render child components using the `Outlet` component, allowing for efficient deep linking and complex UI hierarchies.

What is the best way to load data for routes in a React single-page application?▼

The best way to load data for routes in a React SPA is by using route loaders or integrating TanStack Query, which provides efficient data fetching strategies directly within your React Router v6/v7 configuration.

How do I manage error handling and 404 pages in React Router v6?▼

Manage error handling and 404 pages in React Router v6/v7 by applying built-in best practices for route-level error boundaries, ensuring users see appropriate fallback UIs when navigation or data loading fails.

Does this React routing approach work for complex applications like an e-commerce site?▼

Yes, this React routing approach works perfectly for complex applications like an e-commerce site or content management system, providing the multiple screens, deep linking, and robust navigation required for modern SPAs.