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

What this error means

This error indicates that you're trying to use the `useNavigate` hook (or other React Router hooks like `useLocation`, `useParams`, or `useSearchParams`) in a component that is not wrapped by a Router component. React Router v6 fully embraced hooks for sharing router state, and these hooks depend on React Context provided by a Router component to function properly. The Router component (typically `BrowserRouter`, `HashRouter`, or `MemoryRouter`) acts as a context provider that makes routing information available to all descendant components. When you call `useNavigate()` outside this context tree, React Router cannot access the necessary routing state and throws this error to prevent runtime failures. This is a strict requirement in React Router v6+ and applies to all routing hooks, not just `useNavigate`. The error is actually a helpful guard that catches configuration mistakes early in development.

Typical symptoms

• Application crashes immediately on mount with "useNavigate() may be used only in the context of a Router component"
• Error appears when trying to navigate programmatically from a component
• Tests fail with Router context errors when testing components that use routing hooks
• Error occurs after refactoring component hierarchy or moving Router wrapper
• Problem appears when using authentication providers that wrap the app
• Development server shows the error but it wasn't present before recent changes

Common causes

1. Calling useNavigate() or other routing hooks in a component that renders outside the Router wrapper
2. Router component (BrowserRouter/HashRouter) is placed too deep in the component tree, below components that need routing hooks
3. Component using routing hooks is rendered in a separate React root or portal outside the Router context
4. Testing environment doesn't wrap the tested component in a Router for unit/integration tests
5. Authentication or state management provider wraps the Router instead of being a child of it
6. Router component was accidentally removed during refactoring or code changes
7. Using routing hooks in top-level component that is a sibling to Router rather than a child

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

// index.js or main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// ✅ Correct: Component is inside Router
<BrowserRouter>
  <App>
    <MyComponent /> {/* Can use useNavigate here */}
  </App>
</BrowserRouter>

// ❌ Wrong: Component is outside Router
<div>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  <MyComponent /> {/* Cannot use useNavigate here */}
</div>

// ✅ Correct order
<BrowserRouter>
  <AuthProvider>
    <App />
  </AuthProvider>
</BrowserRouter>

// ❌ Wrong order
<AuthProvider>
  <BrowserRouter>
    <App />
  </BrowserRouter>
</AuthProvider>

// Using React Testing Library
import { render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('component renders correctly', () => {
  render(
    <BrowserRouter>
      <MyComponent />
    </BrowserRouter>
  );
  // Your test assertions...
});

// test-utils.js
import { render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';

export function renderWithRouter(ui, options = {}) {
  return render(
    <BrowserRouter>
      {ui}
    </BrowserRouter>,
    options
  );
}

// In your test file
import { renderWithRouter } from './test-utils';

test('component works', () => {
  renderWithRouter(<MyComponent />);
});

// If rendering to a portal
import { createPortal } from 'react-dom';
import { useNavigate } from 'react-router-dom';

function ModalWithNavigation() {
  const navigate = useNavigate(); // This works because component is inside Router

  return createPortal(
    <div className="modal">
      <button onClick={() => navigate('/home')}>Go Home</button>
    </div>,
    document.getElementById('modal-root')
  );
}

// The parent component tree should be:
// <BrowserRouter>
//   <App>
//     <ModalWithNavigation /> {/* Component using portal is inside Router */}
//   </App>
// </BrowserRouter>

import { useInRouterContext } from 'react-router-dom';

function MyComponent() {
  const hasRouter = useInRouterContext();

  console.log('Has router context:', hasRouter);

  if (!hasRouter) {
    console.error('Component is not inside a Router!');
    return <div>Router context missing</div>;
  }

  // Safe to use routing hooks now
  const navigate = useNavigate();
  // ...
}

Advanced notes

Frequently asked questions

What does "Error: useNavigate() may be used only in the context of a <Router> com" mean?

This error indicates that you're trying to use the useNavigate hook (or other React Router hooks like useLocation, useParams, or useSearchParams) in a component that is not wrapped by a Router component. React Router v6 fully embraced hooks for sharing router state, and these hooks depend on React Context provided by a Router component to function properly. The Router component (typically BrowserRouter, HashRouter, or MemoryRouter) acts as a context provider that makes routing information available to all descendant components.

How do I fix "Error: useNavigate() may be used only in the context of a <Router> com"?

This error occurs when you call useNavigate or other React Router hooks outside of a Router context provider. React Router hooks require access to the router state provided by a parent Router component.

What causes "Error: useNavigate() may be used only in the context of a <Router> com"?

Calling useNavigate() or other routing hooks in a component that renders outside the Router wrapper Router component (BrowserRouter/HashRouter) is placed too deep in the component tree, below components that need routing hooks Component using routing hooks is rendered in a separate React root or portal outside the Router context

Is the "Error: useNavigate() may be used only in the context of a <Router> com" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Related errors

• Route path must start with / or * if it is the first segment of its absolute path

  Route path must start with / or * if it is the first segment

  MEDIUM

• The component for route did not return a valid React element

  The component for route did not return a valid React element

  MEDIUM

• Dynamic route segment parameter must be a non-empty string

  Dynamic route segment parameter must be a non-empty string

  MEDIUM

• Cannot resolve module dependency

  How to fix "Cannot resolve module dependency" in React

  HIGH

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React Router useNavigate API documentation(Official Docs)
• Bobby Hadz guide to fixing useNavigate context errors
• DhiWise guide to resolving useNavigate errors
• 🐙
  React Router GitHub issue about useNavigate context requirement(GitHub)