Agent skill · mindrally
react-router-v7
React Router v7 framework mode conventions for route modules, data loaders, actions, and progressive enhancement. Use when building file-based routes with loaders/actions, handling form submissions with Form/useFetcher/useSubmit, adding route ErrorBoundary components, revalidating data after mutations, or migrating Remix-style route modules to React Router v7.
What it needs
About 4k tokens when loaded.
What this skill does
React Router v7 React Router v7 framework mode unifies routing, data loading, and mutations into route modules, each exporting a loader, action, default component, and ErrorBoundary for a single URL segment. Workflow for Building a Route Module 1. Create the route file — Add a file under app/routes/ (or your configured routes directory) for the URL segment, using nested folders/files for layouts and dynamic segments. 2. Export a loader — Fetch the data the route needs before render; validate route params and search params at the top of the loader. 3. Export a component — Read loader data via useLoaderData() and render UI; keep the component focused on presentation. 4. Export an action — Handle POST/PUT/DELETE submissions from <Form> or useFetcher; return typed data (including validation errors) instead of throwing for expected failures. 5. Export an ErrorBoundary — Handle thrown errors (400s, 500s, unexpected exceptions) locally so one route's failure doesn't take down the whole app. 6. Wire up navigation — Use <Form>, useFetcher, and useSubmit for mutations so the app works with JavaScript disabled and gets optimistic UI when it's enabled. 7. Test the module — Write tests for the loader, action, validation failures, and error boundary independently of the rendered component tree. Route Modules Use route modules as the boundary for route UI, loader data, actions, metadata, and error boundaries — a route module is the unit of code splitting and data loading. Keep route modules small; move shared UI to app/components/ and reusable data access to a services layer (e.g. app/services/posts.server.ts). Prefer file-based routing in framework mode when the project is configured for it; use the explicit routes.ts config for advanced/dynamic route trees. Use nested routes for shared layouts and progressive disclosure — a parent route's <Outlet /> renders the matched child. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mindrally/react-router-v7