React Router makes more sense when you see it as a system: it connects the browser’s location to a matched route hierarchy, renders that hierarchy as nested UI, and—depending on the mode—coordinates route data and mutations. APIs such as <Route>, <Outlet>, loaders, and actions are parts of that flow, not isolated features.
How React Router works: from URL to rendered page
Think of routing as a cycle with three linked jobs: track and change the current location, match that location against route definitions, and render UI from the resulting matches. A navigation changes the location; the router finds the applicable route hierarchy and renders the corresponding interface.
The v6 concepts guide lays out this enduring mental model, though the page is labeled v6.30.3 and warns that it needs updating for the v6.4 data APIs. Use it for the history, matching, and nested-rendering concepts—not as the current reference for Data or Framework Mode details. React Router’s v6 main concepts
Nested routes turn URL structure into UI structure
A route tree describes which screens belong inside others. If a parent route matches along with a child route, the parent can render shared UI—such as navigation or a sidebar—and use <Outlet> as the insertion point for the matched child.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems#1 Best Overall
In Declarative Mode, the current documentation shows this relationship with <BrowserRouter>, <Routes>, and nested <Route> elements. Index routes provide the default child view at a parent path; layout routes let shared UI wrap child screens. The URL segments and UI structure are connected, rather than being separate lists that happen to work together. Declarative routing documentation
Declarative, Data, and Framework are levels of responsibility
React Router describes itself as a multi-strategy router. Its three modes are additive: each step supplies more routing and application infrastructure, while giving the developer less control over some architectural choices. Choose according to how much of that structure you want React Router to provide, not because the modes are unrelated products. React Router’s mode guidance
| Mode | How routes are expressed | What React Router provides | What remains under your control |
|---|---|---|---|
| Declarative | Routes are rendered with <Routes> and <Route>. |
URL-to-component matching, navigation, and active-state tools such as <Link>, useNavigate, and useLocation. |
Your data abstractions and broader application architecture. |
| Data | Route configuration lives outside React rendering. | Loaders, actions, fetchers, and pending states. | You retain more control over bundling, data handling, and server abstractions. |
| Framework | Route modules are the file-level units, integrated through the React Router Vite plugin. | Data Mode capabilities plus the Route Module API, type-safe route helpers, intelligent code splitting, and SPA, SSR, and static-rendering strategies. | You choose how to use the supplied framework capabilities and where to run the resulting server handler. |
The official mode overview distinguishes feature availability by mode; a loader or action should not be assumed to work in every setup. Declarative Mode fits a project that wants basic routing or already has its own data layer. Data Mode fits one that wants route-aware reads and mutations but still wants to own more of its infrastructure. Framework Mode fits one that wants React Router to provide more of the application framework.
In Data Mode, reads and writes form one route-data cycle
A loader supplies data for a route. An action handles a mutation. When an action completes, React Router revalidates loader data by default so the UI can reflect the change. This turns a write into a connected flow: submit the change, then refresh the route data that supports the interface.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →A fetcher can submit to an action without navigating to a new location or adding a history entry. That is useful when a control should update data in place rather than take the user to another route. These are Data Mode behaviors; the mode determines whether React Router supplies them. Data Mode actions documentation
Framework Mode packages route behavior into route modules
In Framework Mode, route modules are the file-level units for route behavior. The documented capabilities include automatic code splitting, data loading, actions, revalidation, and error boundaries. Framework loaders run on the server during server rendering or build-time pre-rendering; clientLoader runs in the browser. That distinction matters when deciding where a route’s data work executes. Route Module documentation Framework data loading documentation
The Quick Start describes Framework Mode output as a server request handler plus static browser assets. You can run the handler inside a custom server or use React Router as a single-page app without a server, so the mode does not prescribe a particular hosting platform. React Router Quick Start
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Put the pieces together when choosing an approach
- Start with the location and route tree. Decide which URLs should match which routes and where shared layouts belong.
- Map the route tree to the UI. Use nested routes when screens share parent UI, with
<Outlet>at the point where the child screen should appear. - Decide who owns data behavior. If your app already handles data independently, Declarative Mode may be enough. If data should follow routes, Data Mode adds loaders, actions, fetchers, and pending states.
- Decide how much framework infrastructure you want. Framework Mode adds route modules and rendering/build capabilities through its Vite integration; it can produce a server handler and browser assets without forcing a single hosting arrangement.
Once these decisions are explicit, the API names become easier to place: links and navigation change location, route definitions describe matches, outlets render nested matches, loaders provide route data, and actions change it. The mode is the boundary that tells you which of those responsibilities React Router handles.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
