react-router-framework-mode

React Router framework mode lets you configure loaders and actions by exporting them directly from route modules in app/routes.ts. This skill guides implementation of server-side data loading, client hydration, and form mutations while maintaining type-safe route data through generated Route types.

The loader runs on the server for initial data fetching, while clientLoader executes in the browser for subsequent navigations. This skill guides implementation of both patterns to support pending and optimistic UI, ensuring proper data hydration without full server roundtrips.

Error boundaries and middleware are configured by exporting ErrorBoundary and middleware functions from your route modules. This skill provides integration guidance for handling route-level errors gracefully and intercepting requests to improve application safety and user experience.

File-based routing is enabled by defining your route tree in app/routes.ts and configuring build behavior in react-router.config.ts. This skill helps you structure route module exports including HydrateFallback, headers, meta, links, and shouldRevalidate for full-stack applications.

Yes, React Router framework mode supports type-safe route data through generated Route types. This skill guides you in leveraging type inference for your loaders, actions, and component props to prevent runtime errors during full-stack data fetching and form submissions.

Use shouldRevalidate when you need fine-grained control over when route data reloads after navigation or form submissions. This skill helps you implement this route module export alongside loaders and actions to optimize performance by preventing unnecessary data fetching.