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

ReactBEGINNERMEDIUM

This error occurs when the useNavigate hook from React Router is called in a component that is not wrapped within a Router provider (like BrowserRouter or MemoryRouter). The useNavigate hook requires access to React Router's context to function.

What this error means

This error indicates that you're trying to use React Router's useNavigate hook in a component that doesn't have access to the Router context. In React Router v6+, hooks like useNavigate, useLocation, and useParams depend on context provided by Router components (BrowserRouter, HashRouter, MemoryRouter, etc.). The error typically occurs when: - The Router component is defined in the same file or component where you're using useNavigate - Your component tree isn't properly wrapped with a Router at the root level - You're testing components without wrapping them in a Router - You're using the hook in a utility function or class that's outside the component tree

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

1Move Router to application root

The most common fix is to ensure your Router wraps your entire application at the root level. Move your Router component to your entry file (index.js, index.tsx, or main.tsx):

jsx

// src/index.js or src/main.tsx
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>
);

Now any component inside App can safely use useNavigate:

jsx

// src/App.js
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/dashboard');
  };

  return <button onClick={handleClick}>Go to Dashboard</button>;
}

export default App;

2Check Router placement in component tree

Verify that useNavigate is only used inside components that are children of your Router:

❌ Incorrect - Router inside component using the hook:

jsx

import { BrowserRouter, useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate(); // ❌ Error! Router not yet mounted

  return (
    <BrowserRouter>
      <div>Content</div>
    </BrowserRouter>
  );
}

✅ Correct - Router wraps component using the hook:

jsx

import { BrowserRouter } from 'react-router-dom';
import Navigation from './Navigation';

function App() {
  return (
    <BrowserRouter>
      <Navigation /> {/* ✅ Can use useNavigate */}
    </BrowserRouter>
  );
}

// Navigation.js
import { useNavigate } from 'react-router-dom';

function Navigation() {
  const navigate = useNavigate(); // ✅ Works!
  return <nav>...</nav>;
}

3Wrap test components with Router

When testing components that use useNavigate, wrap them in a Router (typically MemoryRouter for tests):

jsx

// Component.test.js
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('renders navigation button', () => {
  render(
    <MemoryRouter>
      <MyComponent />
    </MemoryRouter>
  );

  expect(screen.getByText('Navigate')).toBeInTheDocument();
});

For multiple tests, create a custom render helper:

jsx

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

export function renderWithRouter(ui, { route = '/' } = {}) {
  window.history.pushState({}, 'Test page', route);

  return render(
    <MemoryRouter initialEntries={[route]}>
      {ui}
    </MemoryRouter>
  );
}

Then use it in tests:

jsx

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

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

4Add Router decorator for Storybook

If you're using Storybook and your components use navigation hooks, add a router decorator:

jsx

// .storybook/preview.js
import { MemoryRouter } from 'react-router-dom';

export const decorators = [
  (Story) => (
    <MemoryRouter initialEntries={['/']}>
      <Story />
    </MemoryRouter>
  ),
];

Or add it to individual stories:

jsx

// MyComponent.stories.jsx
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

export default {
  title: 'MyComponent',
  component: MyComponent,
  decorators: [
    (Story) => (
      <MemoryRouter>
        <Story />
      </MemoryRouter>
    ),
  ],
};

export const Default = {
  args: {},
};

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

What this error means

Typical symptoms

Common causes

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

Advanced notes

Related errors

Official resources & further reading