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.

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.