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

What this error means

This error is React Router's way of telling you that you're trying to use routing functionality in a component that doesn't have access to the Router context. React Router hooks like useLocation, useNavigate, useParams, and others depend on React Context to access routing state and functionality. The Router component (BrowserRouter, MemoryRouter, HashRouter, etc.) provides this context to all its child components through React's Context API. When you call useLocation outside of a Router component's tree, React Router can't find the context it needs to provide location information, resulting in this error. This is a protective measure to prevent runtime errors that would occur if the hook tried to access undefined routing context. The error most commonly appears when components using Router hooks are rendered before the Router component is mounted, when Router hooks are used in provider components that wrap the Router, or when multiple versions of react-router are installed causing context mismatches.

Typical symptoms

• Application crashes immediately on page load with an uncaught error
• Error appears when navigating to routes that use Router hooks
• Tests fail with 'useLocation may be used only in the context' error
• Error occurs after adding authentication or state management providers
• Components using useNavigate, useParams, or useLocation throw errors
• React DevTools shows Router hooks being called outside Router tree
• Error happens after upgrading React Router versions

Common causes

1. Calling useLocation in a component that renders before or outside the Router component
2. Auth providers or context providers wrapping the Router component instead of being nested inside it
3. Using Router hooks in the root App component that renders the Router itself
4. Calling Router hooks in custom providers that are parents of the Router
5. Multiple versions of react-router or react-router-dom installed in node_modules
6. Test files not wrapping components in a Router when testing components that use Router hooks
7. Router hooks called in module-level code or outside React components
8. Incorrect component hierarchy where Router is conditionally rendered after hook usage

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

// ✅ Correct: Router at the root in index.tsx
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

// ❌ Incorrect: Using useLocation before Router
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation(); // Error! No Router context yet

  return (
    <BrowserRouter>
      <Routes>{/* ... */}</Routes>
    </BrowserRouter>
  );
}

// ❌ Incorrect: AuthProvider wrapping Router
<AuthProvider>
  <BrowserRouter>
    <App />
  </BrowserRouter>
</AuthProvider>

// ✅ Correct: AuthProvider inside Router
<BrowserRouter>
  <AuthProvider>
    <App />
  </AuthProvider>
</BrowserRouter>

<BrowserRouter>
  <AuthProviderWithRouter>
    <App />
  </AuthProviderWithRouter>
</BrowserRouter>

// In AuthProviderWithRouter.tsx
function AuthProviderWithRouter({ children }) {
  const location = useLocation(); // Now safe to use
  // Auth logic using location
  return <AuthProvider location={location}>{children}</AuthProvider>;
}

# Check installed versions
npm list react-router react-router-dom

# Remove duplicate installations
rm -rf node_modules package-lock.json
npm install

{
  "dependencies": {
    "react-router": "^6.20.0",
    "react-router-dom": "^6.20.0"
  }
}

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

test('renders component with routing', () => {
  render(
    <MemoryRouter initialEntries={['/']}>
      <MyComponent />
    </MemoryRouter>
  );

  // Your assertions
});

const { getByText } = render(
  <MemoryRouter initialEntries={['/profile/123']}>
    <Routes>
      <Route path="/profile/:id" element={<ProfilePage />} />
    </Routes>
  </MemoryRouter>
);

// ❌ Incorrect: Hook in same component as Router
function App() {
  const location = useLocation(); // Error!

  return (
    <BrowserRouter>
      <Routes>{/* ... */}</Routes>
    </BrowserRouter>
  );
}

// ✅ Correct: Split into parent and child
function App() {
  return (
    <BrowserRouter>
      <AppContent />
    </BrowserRouter>
  );
}

function AppContent() {
  const location = useLocation(); // Safe here
  // Use location for analytics, auth checks, etc.

  return <Routes>{/* ... */}</Routes>;
}

Advanced notes

Frequently asked questions

What does "useLocation() may be used only in the context of a <Router> component." mean?

This error is React Router's way of telling you that you're trying to use routing functionality in a component that doesn't have access to the Router context. React Router hooks like useLocation, useNavigate, useParams, and others depend on React Context to access routing state and functionality. ) provides this context to all its child components through React's Context API.

How do I fix "useLocation() may be used only in the context of a <Router> component."?

This error occurs when calling useLocation or other React Router hooks outside the Router component's context. React Router hooks rely on context provided by BrowserRouter or other Router components, and must be called within child components.

What causes "useLocation() may be used only in the context of a <Router> component."?

Calling useLocation in a component that renders before or outside the Router component Auth providers or context providers wrapping the Router component instead of being nested inside it Using Router hooks in the root App component that renders the Router itself

Is the "useLocation() may be used only in the context of a <Router> component." 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

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

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

  MEDIUM

• You passed a `<Route>` element at depth 3 but we could not find a matching route. Please check your route config.

  Unmatched Route Segment at Depth in React Router

  MEDIUM

• Cannot use useParams() for a route that does not contain URL parameters

  useParams returns empty object in React Router

  MEDIUM

• A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

  A <Route> is only ever to be used as the child of <Routes> element

  MEDIUM

• 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