clerk-react-router-patternslisted

# React Router Patterns SDK: `@clerk/react-router` v3.5+. Supports React Router v7.9+ and v8. ## What Do You Need? | Task | Reference | |------|-----------| | Auth in loaders and actions | references/loaders-actions.md | | Protected routes and redirects | references/protected-routes.md | | SSR user data and session | references/ssr-auth.md | ## React Router v7 vs v8 Check the installed `react-router` major version before scaffolding — the config differs: | | v7.9+ | v8+ | |--|--|--| | Middleware API | Opt-in: set `future: { v8_middleware: true }` in `react-router.config.ts` | Always on — do NOT set the flag (v8 removed it) | | `ssr.noExternal` workaround (below) | Not needed | **Required** | ## Minimal Setup ### 1. vite.config.ts (v8 only — REQUIRED) React Router v8 ships development/production conditional exports. In `react-router dev`, Vite externalizes `@clerk/react-router` for SSR, so Node resolves the production build of react-router while the app code gets the development build — two module instances, two Router contexts. Every request then fails during SSR with: ``` Error: useNavigate() may be used only in the context of a <Router> component. ``` **`npm ls react-router` shows a single copy — that does NOT rule this out.** The duplication is per export condition, not per installed copy. Do not chase duplicate installs; add the workaround (upstream issue: https://github.com/remix-run/react-router/issues/15232): ```ts import { reactRouter } from '@react-router