react-router-framework-mode

Builds full-stack React apps with React Router's framework mode, including routes, loaders, actions, and SSR/SPA/pre-render support.

Updated Apr 28, 2026
One-click install
npx skills add https://github.com/eralvarez/react-csr-template --skill react-router-framework-mode-eralvarez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-router-framework-mode
Source: https://github.com/eralvarez/react-csr-template/tree/main/.agents/skills/react-router-framework-mode
Command: npx skills add https://github.com/eralvarez/react-csr-template --skill react-router-framework-mode-eralvarez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Framework-mode enables end-to-end development of full-stack React applications using React Router's framework-mode workflow, unifying routing, data loading, mutations, and rendering strategies.

Core Features & Use Cases

  • File-based routing with server/client/static rendering strategies
  • Loader, clientLoader, action, and clientAction for data loading and mutations
  • Middleware and context API for authentication and data sharing
  • Type-safe route modules and SSR/SPA/prerender configurations

Quick Start

Create a new React Router framework-mode project by defining routes in app/routes.ts and enabling SSR or prerender in react-router.config.ts, then implement loader, clientLoader, action, and middleware as needed.

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 server-side rendering and pre-rendering in a React Router project?

You can configure SSR and pre-rendering strategies in React Router by defining rendering modes inside the react-router.config.ts file, enabling server, client, or static rendering outputs for your full-stack application.

What's the best way to handle data loading and mutations in React Router framework mode?

Handle data loading and mutations in React Router framework mode by implementing loader and action functions within your route modules to manage server-side data fetching and form submissions.

Can I use file-based routing with type-safe route modules in React Router?

Yes, React Router framework mode supports file-based routing configuration via app/routes.ts and provides type-safe route modules using the +types system to ensure end-to-end type safety.

How does middleware work for authentication and context sharing in React Router?

Middleware in React Router intercepts requests to manage authentication and share data across routes via the context API, allowing you to pass user sessions or shared state directly to loaders and actions.

When should I use clientLoader and clientAction instead of server-side loaders in React Router?

Use clientLoader and clientAction in React Router when you need to execute data loading or mutations directly on the client side, optimizing SPA navigation without requiring server round-trips.

How do I manage error boundaries across different rendering strategies in a full-stack React app?

Manage error boundaries in React Router by exporting an ErrorBoundary component from your route module, which automatically catches uncaught exceptions during SSR, SPA, and pre-render rendering processes.