skills.rest
Lrmdom
LrmdomCOMMUNITY
Explore all skills by this author →
GitHub

react-router-framework-mode

Configure React Router framework mode with file-based routes and type-safe modules.

Updated Dec 17, 2025
Search Tags:#routing#type-safety#loaders#actions#server-client#react-router#framework-mode
One-click install
npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill react-router-framework-mode-lrmdom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-router-framework-mode
Source: https://github.com/Lrmdom/patrimonio-pwa/tree/main/.windsurf/skills/react-router-framework-mode
Command: npx skills add https://github.com/Lrmdom/patrimonio-pwa --skill react-router-framework-mode-lrmdom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Framework mode unifies client and server routing with file-based routes, loaders, actions, and type-safe route modules, simplifying the creation of full-stack React applications.

Core Features & Use Cases

  • File-based routing, SSR/SPA/static rendering strategies, and data loading with loader/clientLoader
  • Mutations and forms via action/clientAction with integrated navigation and error handling
  • Type-safe route module API, references, and configuration via react-router.config.ts
  • Real-world workflows like authentication, protected routes, and dynamic segments

Quick Start

Define a new route module with loaders, actions, and a route map in app/routes.ts to bootstrap a full-stack React Router app.

Frequently Asked Questions about react-router-framework-mode

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

FAQPage Schema
What is framework mode in React Router and how does it handle full-stack routing?▼

Framework mode in React Router unifies client and server routing by using file-based routes, loaders, and actions to simplify building full-stack React applications. It coordinates UI state with server-side data fetching and mutations.

How do I configure routes and data loaders in a React Router full-stack app?▼

You configure routes and data loaders by defining a filesystem-based route graph in app/routes.ts and using react-router.config.ts. This setup leverages type-safe route modules to coordinate loader and clientLoader functions for SSR and SPA rendering.

How does React Router handle data mutations and forms with actions?▼

React Router handles data mutations and forms via action and clientAction functions within type-safe route modules. This mechanism integrates mutations directly with navigation and error handling, allowing seamless data updates across server and client environments.

Can I use React Router framework mode for both SSR and static rendering?▼

Yes, React Router framework mode supports SSR, SPA, and static rendering strategies. By configuring react-router.config.ts and utilizing loader and clientLoader functions, you can implement server-side and client-side rendering within the same full-stack application.

How do I implement error boundaries and optimistic UI in React Router framework mode?▼

You implement error boundaries and optimistic UI by leveraging the type-safe route module API within framework mode. This approach coordinates UI state, handles action rejections, and manages pending states during data loading and mutations across server and client.

Related Skills

Explore More Software Engineering Skills→
tech-with-sethtech-with-seth
4

react-router-framework-mode

Build full-stack React applications with React Router framework mode.

Official
Advanced
fcalellfcalell

tanstack-router

Create type-safe file-based routes with TanStack Router for React apps.

Community
Intermediate
naviktnavikt

react-router-framework-mode

Configure React Router framework mode for routes, loaders, actions, and rendering strategies.

Official
Intermediate
iulspopiulspop

react-router-framework-mode

Create full-stack React applications with React Router framework mode.

Community
Intermediate