Sign in

pulls/pr_01m47d24b0e6n91zwymwxg0vpx

public

pr_01m47d24b0e6n91zwymwxg0vpx/apps/web/.agents/skills/react-router/references/data-mode.md

165 lines4,797 bytesCodeBlame
1# Data Mode
2
3Data Mode uses data routers such as `createBrowserRouter` and renders with `<RouterProvider>`. It gives an app route objects, loaders, actions, pending UI, fetchers, and SSR primitives without adopting the Framework Vite plugin or route-module file conventions.
4
5Use this reference after the main skill identifies a Data Mode app.
6
7## Read the Local Docs by Mode
8
9Start with:
10
11```txt
12react-router/docs/start/modes.md
13react-router/docs/start/data/index.md
14```
15
16Then use the Data docs under:
17
18```txt
19react-router/docs/start/data/
20```
21
22Those files cover installation, route objects, routing, data loading, actions, navigation, pending UI, and testing. For task-specific details, read relevant files in:
23
24```txt
25react-router/docs/how-to/
26react-router/docs/explanation/
27```
28
29Always check the `[MODES: data, ...]` marker in a doc before applying it.
30
31## Data Router Shape
32
33Typical setup:
34
35```tsx
36import { createBrowserRouter, RouterProvider } from "react-router";
37
38const router = createBrowserRouter([
39 {
40 path: "/",
41 Component: Root,
42 loader: rootLoader,
43 children: [
44 { index: true, Component: Home },
45 {
46 path: "projects/:projectId",
47 Component: Project,
48 loader: projectLoader,
49 },
50 ],
51 },
52]);
53
54root.render(<RouterProvider router={router} />);
55```
56
57Look for route object arrays and APIs such as:
58
59- `createBrowserRouter`
60- `createHashRouter`
61- `createMemoryRouter`
62- `RouterProvider`
63- `loader`
64- `action`
65- `Component`
66- `ErrorBoundary`
67- `lazy`
68- `children`
69
70## Route Objects and Routing
71
72Before editing route configuration, read:
73
74```txt
75react-router/docs/start/data/routing.md
76react-router/docs/start/data/route-object.md
77```
78
79Rules:
80
81- Keep route objects outside render when possible.
82- Use nested routes for shared layouts and data boundaries.
83- Use index routes for default child content.
84- Use dynamic segments and splats according to route-object docs.
85- Prefer `Component`/`ErrorBoundary` route object properties in Data Mode examples unless the existing app uses `element` consistently.
86
87## Data and Mutations
88
89Before working on data loading or mutations, read:
90
91```txt
92react-router/docs/start/data/data-loading.md
93react-router/docs/start/data/actions.md
94```
95
96Rules:
97
98- Load route data with route `loader` functions.
99- Mutate route data with route `action` functions.
100- Prefer loaders/actions over route-level `useEffect` fetching.
101- Use `request`, `params`, and returned/throwable Responses as described in the docs.
102- Let React Router revalidate after actions unless there is a documented reason to customize revalidation.
103
104Common patterns:
105
106- Validation failure from an action: return `data({ errors, values }, { status: 400 })`, then render errors with `useActionData()` or `fetcher.data`.
107- Missing record in a loader: throw `data("Not Found", { status: 404 })` and render the route `ErrorBoundary`.
108- Search/filter data: parse `new URL(request.url).searchParams` in the loader so the URL is shareable and bookmarkable.
109
110## Forms, Fetchers, and Pending UI
111
112For forms and pending UI, read:
113
114```txt
115react-router/docs/start/data/actions.md
116react-router/docs/start/data/pending-ui.md
117react-router/docs/how-to/fetchers.md
118react-router/docs/explanation/form-vs-fetcher.md
119```
120
121Rules of thumb:
122
123- Search/filter form that updates the URL: `<Form method="get">`.
124- Mutation that should change URL/history or redirect after completion: `<Form method="post">`.
125- Mutation that should keep the user on the same page: `useFetcher` / `<fetcher.Form>`.
126- Optimistic UI: derive from `fetcher.formData` or `navigation.formData`.
127
128## Navigation and URL State
129
130Before changing navigation or search params, read:
131
132```txt
133react-router/docs/start/data/navigating.md
134react-router/docs/how-to/search-params.md
135react-router/docs/explanation/location.md
136```
137
138Rules:
139
140- Use `<Link>`/`<NavLink>` for user-initiated internal navigation.
141- Use `redirect` in loaders/actions when navigation follows data loading or mutations.
142- Use `useNavigate` for imperative client-side event navigation.
143- Treat URL params as strings and validate/parse them.
144- Preserve unrelated search params unless intentionally resetting them.
145
146## SSR in Data Mode
147
148Data Mode SSR is manual and lower-level than Framework Mode. Before implementing or changing SSR, read the Data Mode custom/SSR docs and match existing server abstractions.
149
150Start with:
151
152```txt
153react-router/docs/start/data/custom.md
154```
155
156Look for APIs like `createStaticHandler`, `createStaticRouter`, `StaticRouterProvider`, and hydration data handling in the current app before changing anything.
157
158## RSC Data
159
160If this Data Mode app uses `unstable_RSCRouteConfig`, RSC route config, or low-level RSC server APIs, also read:
161
162```txt
163references/rsc.md
164react-router/docs/how-to/react-server-components.md
165```