Error after following RR7 quick start guide - useNavigate() may be used only in the context of a <Router> component

[sanisoclem]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/sanisoclem/clerk-rr7-repro

Publishable key

Description

Starting a new RR7 project and following the clerk guide doesn't produce a working app. The page errors out with:

useNavigate() may be used only in the context of a component.

Error: useNavigate() may be used only in the context of a component.
at invariant (file:///C:/Users/me/clerk-rr7-repro/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-W3HZJLUQ.mjs:182:11)
at useNavigateUnstable (file:///C:/Users/me/clerk-rr7-repro/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-W3HZJLUQ.mjs:4118:3)
at useNavigate (file:///C:/Users/me/clerk-rr7-repro/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-W3HZJLUQ.mjs:4115:46)
at useAwaitableNavigate (file:///C:/Users/me/clerk-rr7-repro/node_modules/.pnpm/@clerk[email protected][email protected][email protected]__react-router@[email protected]__ctw3iynjxr5uzeptdtabadn6ge/node_modules/@clerk/react-router/src/client/useAwaitableNavigate.tsx:8:20)
at ClerkProviderBase (file:///C:/Users/me/clerk-rr7-repro/node_modules/.pnpm/@clerk[email protected][email protected][email protected]__react-router@[email protected]__ctw3iynjxr5uzeptdtabadn6ge/node_modules/@clerk/react-router/src/client/ReactRouterClerkProvider.tsx:36:29)
at Object.react-stack-bottom-frame (C:\Users\me\clerk-rr7-repro\node_modules.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.node.development.js:8723:18)
at renderWithHooks (C:\Users\me\clerk-rr7-repro\node_modules.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.node.development.js:46

A few things I have tried:

• move ClerkProvider to layout - same outcome
• downgrade to react 18 - same outcome

Steps to reproduce:

1. npx create-react-router@latest my-react-router-app
2. pnpm add @clerk/react-router
3. continue following instructions in: https://clerk.com/docs/quickstarts/react-router
   • update root.tsx to use rootAuthLoader()
   • update root.tsx's default export App and wrap Outlet with ClerkProvider
4. pnpm install
5. pnpm dev

Expected behavior:

To be redirected to login page

Actual behavior:

Error is shown:

Oops!

useNavigate() may be used only in the context of a <Router> component.

Error: useNavigate() may be used only in the context of a <Router> component.
    at invariant (file:///C:/Users/me/clerk-rr7-repro/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-W3HZJLUQ.mjs:182:11)
    at useNavigateUnstable (file:///C:/Users/me/clerk-rr7-repro/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-W3HZJLUQ.mjs:4118:3)
    at useNavigate (file:///C:/Users/me/clerk-rr7-repro/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/react-router/dist/development/chunk-W3HZJLUQ.mjs:4115:46)
    at useAwaitableNavigate (file:///C:/Users/me/clerk-rr7-repro/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]__ctw3iynjxr5uzeptdtabadn6ge/node_modules/@clerk/react-router/src/client/useAwaitableNavigate.tsx:8:20)
    at ClerkProviderBase (file:///C:/Users/me/clerk-rr7-repro/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]__ctw3iynjxr5uzeptdtabadn6ge/node_modules/@clerk/react-router/src/client/ReactRouterClerkProvider.tsx:36:29)
    at Object.react-stack-bottom-frame (C:\Users\me\clerk-rr7-repro\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.node.development.js:8723:18)
    at renderWithHooks (C:\Users\me\clerk-rr7-repro\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.node.development.js:4621:19)
    at renderElement (C:\Users\me\clerk-rr7-repro\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.node.development.js:5056:23)
    at retryNode (C:\Users\me\clerk-rr7-repro\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.node.development.js:5704:22)
    at renderNodeDestructive (C:\Users\me\clerk-rr7-repro\node_modules\.pnpm\[email protected][email protected]\node_modules\react-dom\cjs\react-dom-server.node.development.js:5530:11)

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor
    Memory: 36.24 GB / 63.14 GB
  Binaries:
    Node: 22.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.15.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @clerk/react-router: ^0.1.5 => 0.1.5
    @react-router/dev: ^7.1.0 => 7.1.0
    @react-router/node: ^7.1.0 => 7.1.0
    @react-router/serve: ^7.1.0 => 7.1.0
    @types/node: ^20 => 20.17.10
    @types/react: ^19.0.1 => 19.0.2
    @types/react-dom: ^19.0.1 => 19.0.2
    autoprefixer: ^10.4.20 => 10.4.20
    cross-env: ^7.0.3 => 7.0.3
    isbot: ^5.1.17 => 5.1.18
    postcss: ^8.4.49 => 8.4.49
    react: ^19.0.0 => 19.0.0
    react-dom: ^19.0.0 => 19.0.0
    react-router: ^7.1.0 => 7.1.0
    tailwindcss: ^3.4.16 => 3.4.17
    typescript: ^5.7.2 => 5.7.2
    vite: ^5.4.11 => 5.4.11
    vite-tsconfig-paths: ^5.1.4 => 5.1.4