React Router Data Mode

React Router Data Mode is a React Router Agent Skill for applications that use `createBrowserRouter` and `RouterProvider` to add route-aware data loading and mutations without adopting the framework's Vite plugin. It covers loaders, actions, forms, fetchers, redirects and pending or optimistic UI.

• Existing React apps adding router-managed data loading
• Teams using route objects instead of JSX-only routes
• Applications handling form mutations through React Router
• Developers implementing pending and optimistic navigation states

• Load route data with loaders
• Handle mutations with actions and Form
• Use `useFetcher` for non-navigation mutations
• Build pending or optimistic UI with `useNavigation`

The skill structures routes as route objects under `createBrowserRouter`, uses loaders for read operations and actions for mutations, and applies React Router navigation primitives for transitions and redirects. It also covers pending UI, fetcher workflows and server-rendering considerations for Data Mode.

• Adds data loading without requiring full Framework Mode
• Keeps mutations aligned with route behavior
• Supports pending and optimistic UI
• Useful for existing React applications

• The source repository is archived and read-only, so current React Router docs should be checked for future API changes
• Data Mode has more concepts than simple Declarative Mode
• Application authentication and data-access rules still need project-specific design