react-router-framework-mode

Name: react-router-framework-mode
Availability: InStock
Author: YOSHINO

Configure React Router framework mode routes, loaders, actions, and error handling.

Updated Apr 3, 2026

Search Tags:#routing #middleware #type-safety #loaders #actions #error-boundaries #react-router-framework-mode

Ready to run

npx skills add https://github.com/YunosukeYoshino/harness --skill react-router-framework-mode-yunosukeyoshino

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-router-framework-mode
Source: https://github.com/YunosukeYoshino/harness/tree/main/.agents/skills/react-router-framework-mode
Command: npx skills add https://github.com/YunosukeYoshino/harness --skill react-router-framework-mode-yunosukeyoshino

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Configuring React Router in framework mode can be verbose and error-prone; this skill guides developers through route configuration, loaders/actions, data loading, and robust error handling to deliver reliable full-stack React apps.

Core Features & Use Cases

Framework-mode routing, data loading, loaders, actions, and client data hydration patterns.
Integration guidance for file-based routing with app/routes.ts, react-router.config.ts, and typing with route modules.
Support for pending/optimistic UI, middleware, and error boundaries to improve UX and safety.

Quick Start

Create a new React project and enable framework mode, then apply the skill’s routing and data-loading patterns to configure routes, loaders, actions, and error handling.

Frequently Asked Questions about react-router-framework-mode

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

FAQPage Schema

How do I configure loaders and actions in React Router framework mode?▼

React Router framework mode lets you configure loaders and actions by exporting them directly from route modules in app/routes.ts. This skill guides implementation of server-side data loading, client hydration, and form mutations while maintaining type-safe route data through generated Route types.

What is the difference between clientLoader and loader in React Router?▼

The loader runs on the server for initial data fetching, while clientLoader executes in the browser for subsequent navigations. This skill guides implementation of both patterns to support pending and optimistic UI, ensuring proper data hydration without full server roundtrips.

How do I set up error boundaries and middleware in React Router?▼

Error boundaries and middleware are configured by exporting ErrorBoundary and middleware functions from your route modules. This skill provides integration guidance for handling route-level errors gracefully and intercepting requests to improve application safety and user experience.

How do I enable file-based routing with react-router.config.ts?▼

File-based routing is enabled by defining your route tree in app/routes.ts and configuring build behavior in react-router.config.ts. This skill helps you structure route module exports including HydrateFallback, headers, meta, links, and shouldRevalidate for full-stack applications.

Does React Router framework mode support type-safe route data?▼

Yes, React Router framework mode supports type-safe route data through generated Route types. This skill guides you in leveraging type inference for your loaders, actions, and component props to prevent runtime errors during full-stack data fetching and form submissions.

When should I use shouldRevalidate in React Router route modules?▼

Use shouldRevalidate when you need fine-grained control over when route data reloads after navigation or form submissions. This skill helps you implement this route module export alongside loaders and actions to optimize performance by preventing unnecessary data fetching.