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

ReactBEGINNERHIGH

This error occurs when the useNavigate hook or navigate() function is called outside the Router context. React Router hooks require components to be descendants of a Router component like BrowserRouter or RouterProvider.

What this error means

This error occurs when you try to use React Router's navigation features (useNavigate hook or navigate function) in a component that is not wrapped by a Router component. React Router hooks rely on context provided by Router components like BrowserRouter, HashRouter, or RouterProvider to access routing functionality. The useNavigate hook internally uses React Context to access the routing state and navigation functions. When a component using this hook is not a descendant of a Router component, React cannot find the required context, resulting in this error. This commonly happens when: the Router is placed inside App.tsx instead of index.tsx, components using navigation hooks are rendered outside the Router tree, or during testing when components aren't properly wrapped in a Router.

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

1Move Router to index.tsx or main entry point

The most common fix is to ensure your Router wraps your entire application at the root level. Move the Router component from App.tsx to your entry point:

tsx

// src/index.tsx
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Your App.tsx should only contain Routes, not the Router wrapper:

tsx

// src/App.tsx
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

export default App;

2Use RouterProvider for React Router v6.4+ data features

If using React Router v6.4+, prefer RouterProvider with createBrowserRouter for access to data APIs:

tsx

// src/main.tsx
import { createRoot } from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Root from './routes/root';
import About from './routes/about';
import ErrorPage from './error-page';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
  },
  {
    path: '/about',
    element: <About />,
  },
]);

createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router} />
);

Note: Do NOT pass children to RouterProvider - it only accepts the router prop.

3Wrap test components in Router for Jest/RTL tests

When testing components that use navigation hooks, wrap them in a Router:

tsx

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

test('renders navigation component', () => {
  render(
    <BrowserRouter>
      <MyComponent />
    </BrowserRouter>
  );

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

Or create a custom render helper:

tsx

// test-utils.tsx
import { ReactElement } from 'react';
import { render, RenderOptions } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';

function customRender(
  ui: ReactElement,
  options?: Omit<RenderOptions, 'wrapper'>
) {
  return render(ui, { wrapper: BrowserRouter, ...options });
}

export * from '@testing-library/react';
export { customRender as render };

4Create history helper for navigation outside React components

If you need to navigate from Redux actions, utility functions, or other non-React code, create a history helper:

tsx

// src/lib/navigation.ts
let navigate: ((to: string) => void) | null = null;

export function setNavigate(nav: (to: string) => void) {
  navigate = nav;
}

export function navigateOutsideReact(to: string) {
  if (navigate) {
    navigate(to);
  } else {
    console.error('Navigate function not initialized');
  }
}

Initialize it in a component inside your Router:

tsx

// src/App.tsx
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { setNavigate } from './lib/navigation';

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

  useEffect(() => {
    setNavigate(navigate);
  }, [navigate]);

  return (
    {/* Your routes */}
  );
}

Now you can use it anywhere:

tsx

// Redux action or utility function
import { navigateOutsideReact } from './lib/navigation';

export function logoutUser() {
  // Clear auth state
  localStorage.removeItem('token');

  // Navigate to login
  navigateOutsideReact('/login');
}

5Check for nested or duplicate Router components

Ensure you don't have multiple Router components creating conflicting contexts:

BAD - Multiple routers:

tsx

// index.tsx
<BrowserRouter>
  <App />
</BrowserRouter>

// App.tsx (WRONG - creates nested Router)
<BrowserRouter>
  <Routes>...</Routes>
</BrowserRouter>

GOOD - Single router:

tsx

// index.tsx
<BrowserRouter>
  <App />
</BrowserRouter>

// App.tsx (Correct - no Router wrapper)
<Routes>
  <Route path="/" element={<Home />} />
</Routes>

Search your codebase for all instances of BrowserRouter, HashRouter, MemoryRouter, and RouterProvider to identify duplicates.

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