useNavigate() may be used only in the context of a <Router>

A component used React Router’s navigation outside the router, so it had no route information to work with.

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

Also appears as

  • useLocation() may be used only in the context of a <Router> component.
  • useHref() may be used only in the context of a <Router> component.

Prompt to fix it

My app crashes with "useNavigate() may be used only in the context of a <Router> component." Find where the router is set up (BrowserRouter or RouterProvider) and every component that calls useNavigate or useLocation, or renders <Link>, outside it. Move the router up, usually into main.tsx around <App />, or move those components into a layout route, so all of them are inside it. Wrap tests and stories in MemoryRouter. Check that react-router and react-router-dom aren’t installed at different major versions. Don’t replace navigation with window.location to get around it.

Paste into Layerwise or any AI coding tool.

What it means

React Router keeps the current URL and its navigation tools in a context: shared data that only components inside <BrowserRouter> or <RouterProvider> can reach. useNavigate, useLocation, and <Link> all read from it. When a component calls one of them from outside that wrapper, there is nothing to read, and React Router throws. A <Link> outside the router reports it as useHref().

The component calling the hook usually sits above the router in the tree. A common shape: App calls useNavigate() and also renders <BrowserRouter> in its own JSX. The router only covers what it wraps, so App itself is outside it.

If the component is clearly inside the router, check for two copies of React Router. A project that mixes react-router-dom 6 with react-router 7 gets two separate contexts, so hooks from one package can’t see the router from the other.

Common causes

  • The component that renders <BrowserRouter> also calls useNavigate(), so the hook runs above the router.
  • A header, toast, or provider that uses <Link> or useNavigate() is rendered next to the router in main.tsx instead of inside it.
  • A test or Storybook story renders the component without a router around it.
  • The app imports from react-router-dom and react-router at different major versions.

How to fix it

  1. Find where the router is set up, usually <BrowserRouter> or <RouterProvider> in main.tsx or App.tsx.
  2. Move the router up so it wraps every component that uses router hooks or <Link>. If App needs useNavigate(), wrap <App /> in main.tsx.
  3. With createBrowserRouter, render shared layout pieces like headers inside a layout route instead of outside <RouterProvider>.
  4. In tests and stories, wrap the component in <MemoryRouter>.
  5. Run npm ls react-router react-router-dom and import everything from one package at one major version.

Example fix

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

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    {/* Wrapping App here lets App itself call useNavigate(). */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

Related errors

All errors
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.

Invalid hook call

A hook such as useState ran somewhere React can’t track it, or the app loaded two copies of React that don’t know about each other.

404: NOT_FOUND This page doesn’t exist It may have been moved, removed, or never existed. 404 NOT_FOUND sfo1::ntg68-1793091406762-e6fdeff1eb27

404 on page refresh

Your single-page app works from the home page, but the host has no file for deeper URLs, so reloads and shared links hit a 404.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `App`.

Element type is invalid

A JSX tag pointed at undefined or an object instead of a component, almost always because an import doesn’t match how the file exports it.

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. https://react.dev/link/hydration-mismatch

Hydration failed

The HTML the server sent didn’t match what React rendered first in the browser, so React threw that part away and rebuilt it on the client.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs