react-routerlisted
Install: claude install-skill itsjavi/skills
# React Router
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.
## Identify the Mode
Do not apply Framework/Data patterns to a Declarative app unless you are intentionally migrating modes.
### Framework Mode
Use Framework Mode guidance when you see:
- `@react-router/dev` in dependencies
- `react-router.config.ts`
- `app/routes.ts`
- `app/entry.server.tsx` and/or `app/entry.client.tsx` files
- route modules under `app/routes/`
- route exports like `loader`, `action`, `clientLoader`, `clientAction`, `ErrorBoundary`, `meta`, `links`, or `headers`
- imports from `./+types/...`
- the React Router Vite plugin from `@react-router/dev/vite`
Framework examples usually use the default `app/` directory, but check `react-router.config.ts` for a custom
`appDirectory` before assuming exact paths.
Then read `references/framework-mode.md`.
### Data Mode
Use Data Mode guidance when you see:
- `createBrowserRouter`, `createHashRouter`, `createMemoryRouter`, or `createStaticRouter`
- `<RouterProvider router={router}>`
- route objects with properties like `path`, `children`, `loader`, `action`, `Component`, `ErrorBoundary`, or `lazy`
- data APIs without the Framework Vite plugin
Then read `references/data-mode.md`.
### Declarative Mode
Use Declarative Mode guidance when you see:
- `<BrowserRouter>`, `<HashRouter>`, or `<MemoryRouter>`
- `<Routes>` and `<Route>` JSX