Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| Initial g1t: services, event bus, intents and attempts | 1 | --- |
| 2 | name: react-router | |
| 3 | description: Build applications with React Router in Framework, Data, Declarative, and unstable RSC modes. Use when configuring routes, route modules, loaders, actions, forms, fetchers, navigation, pending UI, SSR/SPA/pre-rendering, middleware, URL params/search params, or React Router upgrades. | |
| 4 | license: MIT | |
| 5 | --- | |
| 6 | ||
| 7 | # React Router | |
| 8 | ||
| 9 | React Router is mode-specific. Before changing an app, identify the mode, load the matching reference, then read the installed docs for the installed package version. | |
| 10 | ||
| 11 | ## Identify the Mode | |
| 12 | ||
| 13 | Do not apply Framework/Data patterns to a Declarative app unless you are intentionally migrating modes. | |
| 14 | ||
| 15 | ### Framework Mode | |
| 16 | ||
| 17 | Use Framework Mode guidance when you see: | |
| 18 | ||
| 19 | - `@react-router/dev` in dependencies | |
| 20 | - `react-router.config.ts` | |
| 21 | - `app/routes.ts` | |
| 22 | - `app/entry.server.tsx` and/or `app/entry.client.tsx` files | |
| 23 | - route modules under `app/routes/` | |
| 24 | - route exports like `loader`, `action`, `clientLoader`, `clientAction`, `ErrorBoundary`, `meta`, `links`, or `headers` | |
| 25 | - imports from `./+types/...` | |
| 26 | - the React Router Vite plugin from `@react-router/dev/vite` | |
| 27 | ||
| 28 | Framework examples usually use the default `app/` directory, but check `react-router.config.ts` for a custom `appDirectory` before assuming exact paths. | |
| 29 | ||
| 30 | Then read `references/framework-mode.md`. | |
| 31 | ||
| 32 | ### Data Mode | |
| 33 | ||
| 34 | Use Data Mode guidance when you see: | |
| 35 | ||
| 36 | - `createBrowserRouter`, `createHashRouter`, `createMemoryRouter`, or `createStaticRouter` | |
| 37 | - `<RouterProvider router={router}>` | |
| 38 | - route objects with properties like `path`, `children`, `loader`, `action`, `Component`, `ErrorBoundary`, or `lazy` | |
| 39 | - data APIs without the Framework Vite plugin | |
| 40 | ||
| 41 | Then read `references/data-mode.md`. | |
| 42 | ||
| 43 | ### Declarative Mode | |
| 44 | ||
| 45 | Use Declarative Mode guidance when you see: | |
| 46 | ||
| 47 | - `<BrowserRouter>`, `<HashRouter>`, or `<MemoryRouter>` | |
| 48 | - `<Routes>` and `<Route>` JSX route configuration | |
| 49 | - route components passed with `element={<Component />}` | |
| 50 | - no data router, no route module convention, and no loaders/actions | |
| 51 | ||
| 52 | Then read `references/declarative-mode.md`. | |
| 53 | ||
| 54 | ### RSC Framework and RSC Data Modes | |
| 55 | ||
| 56 | React Server Components support is unstable and exists in both Framework and Data variants. Use RSC guidance when you see: | |
| 57 | ||
| 58 | - `unstable_reactRouterRSC` | |
| 59 | - `@vitejs/plugin-rsc` | |
| 60 | - `unstable_RSCRouteConfig` | |
| 61 | - RSC entry files such as `entry.rsc` | |
| 62 | - `ServerComponent`, `ServerErrorBoundary`, `ServerLayout`, or `ServerHydrateFallback` | |
| 63 | - React directives or boundary packages such as `"use client"`, `"server-only"`, or `"client-only"` | |
| 64 | ||
| 65 | For RSC Framework, read both `references/framework-mode.md` and `references/rsc.md`. | |
| 66 | For RSC Data, read both `references/data-mode.md` and `references/rsc.md`. | |
| 67 | ||
| 68 | ## Use Installed Docs as Source of Truth | |
| 69 | ||
| 70 | React Router ships markdown docs in the package so guidance can match the installed version: | |
| 71 | ||
| 72 | ```txt | |
| 73 | node_modules/react-router/docs/ | |
| 74 | ``` | |
| 75 | ||
| 76 | Key docs paths: | |
| 77 | ||
| 78 | ```txt | |
| 79 | node_modules/react-router/docs/index.md | |
| 80 | node_modules/react-router/docs/start/ | |
| 81 | node_modules/react-router/docs/how-to/ | |
| 82 | node_modules/react-router/docs/explanation/ | |
| 83 | node_modules/react-router/docs/upgrading/ | |
| 84 | ``` | |
| 85 | ||
| 86 | When this skill references `react-router/docs/...`, read the matching file under `node_modules/react-router/docs/`. If the installed version does not include local docs, use the repo `docs/` directory when working inside the React Router repository; in a consuming app, fall back to version-matched website docs. | |
| 87 | ||
| 88 | Most docs include a mode marker near the top: | |
| 89 | ||
| 90 | ```txt | |
| 91 | [MODES: framework, data, declarative] | |
| 92 | ``` | |
| 93 | ||
| 94 | Only apply a doc when its mode marker matches the app mode. If a task spans modes, prefer the section or file that matches the current app. | |
| 95 | ||
| 96 | RSC is documented primarily in: | |
| 97 | ||
| 98 | ```txt | |
| 99 | node_modules/react-router/docs/how-to/react-server-components.md | |
| 100 | ``` | |
| 101 | ||
| 102 | ## Skill References | |
| 103 | ||
| 104 | Load the relevant reference after identifying the mode: | |
| 105 | ||
| 106 | | Reference | Use When | | |
| 107 | | -------------------------------- | --------------------------------------------- | | |
| 108 | | `references/framework-mode.md` | Framework Mode or RSC Framework base behavior | | |
| 109 | | `references/data-mode.md` | Data Mode or RSC Data base behavior | | |
| 110 | | `references/declarative-mode.md` | Declarative Mode | | |
| 111 | | `references/rsc.md` | Any unstable RSC app | | |
| 112 | ||
| 113 | ## Mode Migration Doc Index | |
| 114 | ||
| 115 | If the user explicitly asks to switch modes, read the target mode reference plus the migration-relevant docs: | |
| 116 | ||
| 117 | | Migration | Docs to read | | |
| 118 | | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | |
| 119 | | Declarative → Data | `react-router/docs/start/modes.md`, `react-router/docs/start/data/routing.md`, `react-router/docs/start/data/data-loading.md`, `react-router/docs/start/data/actions.md` | | |
| 120 | | Declarative/Data → Framework | `react-router/docs/start/modes.md`, `react-router/docs/start/framework/routing.md`, `react-router/docs/start/framework/route-module.md`, `react-router/docs/how-to/route-module-type-safety.md` | | |
| 121 | | Framework SPA/SSR/pre-render changes | `react-router/docs/start/framework/rendering.md`, `react-router/docs/how-to/spa.md`, `react-router/docs/how-to/pre-rendering.md`, `react-router/docs/start/framework/data-loading.md`, `react-router/docs/start/framework/actions.md` | | |
| 122 | | Future flags/upgrades | `react-router/docs/upgrading/future.md` and relevant files under `react-router/docs/upgrading/` | |