react-router-framework-mode

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

Updated Feb 27, 2026
One-click install
npx skills add https://github.com/pau-vega/react-router-drizzle --skill react-router-framework-mode-pau-vega
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-router-framework-mode
Source: https://github.com/pau-vega/react-router-drizzle/tree/main/.agents/skills/react-router-framework-mode
Command: npx skills add https://github.com/pau-vega/react-router-drizzle --skill react-router-framework-mode-pau-vega

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Build full-stack React applications by coordinating routes, loaders, actions, forms, navigation, and error handling within React Router's framework mode, enabling consistent server/client rendering and type-safe route modules.

Core Features & Use Cases

  • Unified routing configuration with file-based routes and react-router.config.ts conventions
  • Data loading and mutations via loader/action patterns and clientLoader/clientAction
  • Global navigation, SSR/SPA strategies, and error boundaries across server and client

Quick Start

Create a minimal framework-mode project with a routes.ts mapping, a root.tsx shell, and a sample loader/action to validate routing.

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 data loaders and actions in React Router framework mode?

Data loaders and actions in React Router framework mode are configured within route modules using loader and action patterns, alongside clientLoader and clientAction for client-side data fetching and mutations.

What is React Router framework mode used for?

React Router framework mode is used to build full-stack React applications by coordinating unified file-based routing, server/client rendering, and type-safe route modules for consistent data loading and mutations.

How do I set up error boundaries for server and client contexts in React Router?

Error boundaries for server and client contexts are set up by defining error handling logic within route modules, allowing you to catch and manage rendering errors across both SSR and SPA strategies.

Can I use middleware and type-safety with react-router.config.ts conventions?

Yes, React Router framework mode supports optional middleware and type-safety strategies configured through react-router.config.ts conventions to streamline full-stack route module workflows.

What's the best way to handle forms and navigation in a full-stack React Router app?

Forms and navigation are handled by leveraging the framework mode workflow with route modules, utilizing built-in form handling and mutation patterns to coordinate data submissions and global navigation.

Do I need a routes.ts mapping to start a minimal React Router framework mode project?

Yes, a minimal framework-mode project requires a routes.ts mapping to define the routing structure, a root.tsx shell for the layout, and a sample loader or action to validate routing.