← ClaudeAtlas

react-routerlisted

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.
itsjavi/skills · ★ 1 · Web & Frontend · score 75
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