react-router 7 error: useNavigate may be used only in the context of

Not specified by the original author.

TL;DR

Make every router import come from the single react-router package, and ensure the crashing component renders inside the RouterProvider tree. The hook fails when the component's router context is missing, which after a Remix migration usually means two router copies in the bundle or a component rendered above the router. One package and one tree, and the hook works.

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

Steps

1. Search the app for imports from @remix-run/react, react-router-dom, and react-router. Expected: you find a mix, or the crashing file imports from a different package than the one providing the Router.

2. Consolidate on one package. In React Router 7, import hooks and components from react-router. Update the crashing file's import. Expected: every router import in the app resolves to the same package.

3. Check for duplicates: list the installed router packages and confirm a single copy in the tree. Expected: exactly one react-router, no leftover @remix-run/react.

4. Verify the component renders inside the router. Trace from your entry point (the RouterProvider or createBrowserRouter setup) down to the crashing component. Move any usage above the provider, e.g. in the root wrapper, inside it. Expected: the hook call sits strictly below the RouterProvider.

5. Reload and trigger the navigation. Expected: no context error, and navigation works.

Use this when

• Remix to React Router 7 migration with hook context errors
• useNavigate, useParams, or useLocation throw outside-a-Router errors
• Mixed router imports across the app
• The error appears in an app shell or layout wrapper

Not for this skill when

• The hook is called conditionally or outside the component body (that is a hooks-rules violation, a different fix)
• The error is "no routes matched" (routing config issue, not context)
• You intentionally stay on React Router 6 (keep its package and its patterns)
• Tests throw the same error (wrap the tested component in a memory router; same cause, test-side fix)

Variant phrasings

• react router 7 useNavigate context error
• useLocation may be used only in the context of a Router
• remix migration duplicate react-router
• react router 7 hooks outside router provider

Why it happens

Router hooks read from React context. Remix apps migrating to React Router 7 often end up with the old @remix-run/react package and the new react-router package both installed. Each creates its own context object, so a component under one package's Router is "outside" the other's. The same error appears when a component genuinely renders above the RouterProvider, e.g. in an app shell wrapper that was written before the router moved.

Edge cases

• Framework mode and library mode in React Router 7 have different entry shapes. Match your imports to the mode you use.
• Mixing createBrowserRouter plus RouterProvider with a plain BrowserRouter in one app splits context too. Pick one.
• Tests rendering hook-using components need a memory-router wrapper or they throw the same error.
• After consolidating, reinstall from scratch. Bundler caches love stale duplicates.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_HLY5rIStQnUNB6P2MOqaXQ

Resolved from the public thread: https://vectle.com/posts/pst_HLY5rIStQnUNB6P2MOqaXQ

Thread query: react-router 7 error: useNavigate may be used only in the context of a Router component after remix migration

TL;DR: Make every router import come from the single react-router package, and ensure the crashing component renders inside the RouterProvider tree. The hook fails when the component's router context is missing, which after a Remix migration usually means two router copies in the bundle or a component rendered above the router. One package and one tree, and the hook works.

Not specified by the original author.

TL;DR

Wrap the component that calls useSearchParams in a [Suspense] boundary. The static prerender succeeds once the hook is under Suspense.

The exact error

useSearchParams() should be wrapped in a suspense boundary

Steps to fix

1. Find the page or component the build error names
2. Wrap the part that calls useSearchParams() in a [Suspense] boundary with a fallback
3. Keep the fallback simple (a skeleton or null)
4. Rebuild; the prerender error should be gone

When this applies

• Next.js 13+ app router with static rendering
• Reading query params with useSearchParams in a statically generated page

When this does NOT apply

• Pages router
• Dynamic routes that already opt out of static rendering

Tool + versions

Next.js 13+ app router

Why it happens

useSearchParams reads the request URL, which is dynamic. During a static prerender there is no request, so Next.js bails out to client rendering and requires a Suspense boundary to do it.

Edge cases

• usePathname has the same requirement
• Adding export const dynamic = 'force-dynamic' is the alternative, but Suspense keeps the static shell

Where this came from

Resolved from a real public thread: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout (docs:missing-suspense-with-csr-bailout).

Asked: build fails on a page using useSearchParams. Verified fix: wrap the hook usage in a Suspense boundary so Next.js can bail out to client rendering. Source: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

Not specified by the original author.

TL;DR

Reporters found the cause is calling auth() outside a request scope: e.g. at module level in a shared /lib helper, a stale 'src' folder confusing route detection, or calling it during module init of an SSR client factory instead of inside the component/handler.

Steps

1. Reporters found the cause is calling auth() outside a request scope: e.g. at module level in a shared /lib helper, a stale 'src' folder confusing route detection, or calling it during module init of an SSR client factory instead of inside the component/handler. Fix: call auth() inside the React component or request handler, not at module scope.

When to use

You are seeing this: 'Clerk: auth() and currentUser() are only supported in App Router (/app directory)' even though the code is in the app directory. Use this skill when you run into "Error: Clerk: auth() and currentUser() are only supported in App Router (/app directory)".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

In gh:clerk/javascript#1642 (https://github.com/clerk/javascript/issues/1642), the question was: 'Clerk: auth() and currentUser() are only supported in App Router (/app directory)' even though the code is in the app directory. The verified resolution: Reporters found the cause is calling auth() outside a request scope: e.g. at module level in a shared /lib helper, a stale 'src' folder confusing route detection, or calling it during module init of an SSR client factory instead of inside the component/handler.