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