react-router-framework-mode
Full-stack React development with file-based routing, server/client rendering, data loading, and type-safe route modules.
- Supports file-based routing with nested routes, dynamic segments, and multiple rendering strategies (SSR, SPA, pre-rendering)
- Handles data loading via
loader/clientLoaderand mutations viaaction/clientActionwith built-in form handling and optimistic UI - Includes 10+ reference guides covering routing, data loading, actions, navigation, error boundaries, authentication, and type safety
- Requires React Router 7.0.0+; middleware features need 7.9.0+ with
v8_middlewareflag
React Router Framework Mode
Framework mode is React Router's full-stack development experience with file-based routing, server-side, client-side, and static rendering strategies, data loading and mutations, and type-safe route module API.
When to Apply
- Configuring new routes (
app/routes.ts) - Loading data with
loaderorclientLoader - Handling mutations with
actionorclientAction - Navigating with
<Link>,<NavLink>,<Form>,redirect, anduseNavigate - Implementing pending/loading UI states
- Configuring SSR, SPA mode, or pre-rendering (
react-router.config.ts) - Implementing authentication
References
Load the relevant reference for detailed guidance on the specific API/concept:
More from remix-run/agent-skills
react-router-data-mode
Build React applications using React Router's data mode with createBrowserRouter and RouterProvider. Use when working with route objects, loaders, actions, Form, useFetcher, or pending/optimistic UI without the Vite plugin.
428react-router-declarative-mode
Build React applications using React Router's declarative mode with BrowserRouter. Use when configuring routes with JSX, navigating with Link/NavLink, or reading URL params and search params without data loaders or actions.
332