useNavigate outside Router ⚛️ React

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

A React Router hook ran in a component that isn’t rendered inside a Router provider.

Seen on: React

Meaning

Hooks like useNavigate, useLocation and useParams need router context. Components rendered outside <BrowserRouter>/<RouterProvider> (or in tests without a MemoryRouter) fail.

Common causes

  • Router placed below the component using the hook
  • App component using hooks outside its own BrowserRouter
  • Tests rendering without a router

⚡ Quick fix

  1. Wrap the app with <BrowserRouter> at the root (index.jsx)
  2. In tests, render inside <MemoryRouter>

Detailed fix by platform

React

  1. render(<MemoryRouter><Profile /></MemoryRouter>);

How to diagnose

  1. Tree — Is the component under the Router?
  2. Recent change — Did it start after a deploy, upgrade, or configuration change? Compare with the last working version.

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.