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.