react-router

Implement type-safe routing with nested routes and SSR support in React.

7|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/hashintel/brunch --skill react-router-hashintel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-router
Source: https://github.com/hashintel/brunch/tree/main/.agents/skills/react-router
Command: npx skills add https://github.com/hashintel/brunch --skill react-router-hashintel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router, @tanstack/router-plugin, @tanstack/react-router-devtools, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Simplifies the implementation of client-side routing in React applications, enabling smooth navigation and dynamic route management.

Core Features & Use Cases

  • Route Management: Easily define routes with nested and dynamic segments for complex layouts.
  • Type-Safe Navigation: Generate type-safe links and programmatic navigation functions to prevent errors.
  • Server-Side Rendering Support: Enable SSR hydration and create routes compatible with server environments.
  • Use Case: Build a multi-page React app with nested layouts, dynamic parameters, and data fetching capabilities using hooks and route components.

Quick Start

Create a route structure with React components, then initialize the router and wrap your app with RouterProvider for seamless navigation.

Frequently Asked Questions about react-router

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

FAQPage Schema
How do I implement type-safe routing in a React application?▼

Type-safe routing in a React application is implemented by defining flexible route structures with nested and dynamic segments, generating type-safe links and programmatic navigation functions to prevent errors during client-side navigation.

What is the best way to structure nested routes for complex layouts in React?▼

Structuring nested routes for complex layouts in React involves defining route components with dynamic segments and initializing a RouterProvider, enabling smooth navigation and modular routing patterns across multi-page interfaces.

Does this React routing approach support server-side rendering and hydration?▼

Yes, this React routing approach supports server-side rendering by enabling SSR hydration and creating routes compatible with server environments, ensuring dynamic route management works seamlessly across both client and server.

Can I use hooks for data fetching within my React route components?▼

Yes, you can use hooks for data fetching capabilities within your React route components to build complex web interfaces that require structured navigation and dynamic data loading before rendering.

How do I set up a multi-page React app with dynamic parameters?▼

To set up a multi-page React app with dynamic parameters, you create a route structure with React components, initialize the router, and wrap your application with RouterProvider for seamless navigation and dynamic route management.