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

ReactBEGINNERHIGHUpdated Dec 10, 2025· 118 views

This error occurs when the useRoutes hook is called outside of a Router provider in React Router v6. The hook requires access to the Router context to function properly.

Quick fix

Fixes useRoutes() 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>
);

Wrap your app with a Router component at the entry point
Move useRoutes to a child component
Check for multiple react-router-dom versions
Verify the component hierarchy

react — error

$// 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>
);
useRoutes() may be used only in the context of a Router component

What this error means

The useRoutes hook in React Router v6 is a powerful way to define routes programmatically using a JavaScript object configuration instead of JSX components. However, this hook relies on React's Context API to access routing information provided by a Router component (such as BrowserRouter, HashRouter, or MemoryRouter). When you call useRoutes in a component that isn't wrapped by a Router component, React Router cannot find the necessary context and throws this error. This is similar to other React Router hooks like useNavigate, useLocation, and useParams, which all require the Router context to function. The error typically happens when you're trying to organize your routing logic but accidentally place the useRoutes call at a level in your component tree that's above or outside the Router provider.

Typical symptoms

Application crashes on load with a context error
Error appears when navigating to any route
React Router hooks fail to initialize
Console shows: 'useRoutes() may be used only in the context of a <Router> component'
Routing configuration doesn't render any components

Common causes

Using useRoutes in a component that's not a child of BrowserRouter or another Router component
Calling useRoutes in the same component where you're rendering the Router wrapper
Router component placed below the component using useRoutes in the component tree
Multiple versions of react-router-dom installed causing context mismatch
Using useRoutes directly in index.js or main.jsx before the Router wrapper

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

1Wrap your app with a Router component at the entry point

The most reliable fix is to wrap your entire application with a Router component in your main entry file (index.js or main.jsx):

jsx

// 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>
);

This ensures that all components in your app have access to the Router context.

2Move useRoutes to a child component

If you're calling useRoutes in the same component where you render the Router, create a separate child component:

jsx

// App.js
import { BrowserRouter } from 'react-router-dom';
import AppRoutes from './AppRoutes';

function App() {
  return (
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  );
}

export default App;

jsx

// AppRoutes.js
import { useRoutes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function AppRoutes() {
  const routes = useRoutes([
    { path: '/', element: <Home /> },
    { path: '/about', element: <About /> },
    { path: '*', element: <div>Not Found</div> }
  ]);

  return routes;
}

export default AppRoutes;

This pattern separates the Router provider from the route configuration.

3Check for multiple react-router-dom versions

If you have conflicting versions of react-router-dom, the context won't work properly. Check your package.json and lock file:

bash

# Check installed versions
npm list react-router-dom

# Remove node_modules and reinstall if you see duplicates
rm -rf node_modules package-lock.json
npm install

Ensure all react-router packages use the same version:

json

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

Avoid installing both react-router and react-router-dom as they can conflict.

4Verify the component hierarchy

Make sure your component tree structure is correct:

bash

BrowserRouter (or other Router)
  └── Component using useRoutes
      └── Your route components

The useRoutes hook must be called in a component that's rendered *inside* the Router, not at the same level or above it. Use React DevTools to inspect your component tree and verify the Router wrapper is present.

Advanced notes

Alternative: Use Routes component instead

If you prefer JSX syntax over the object configuration, you can use the <Routes> component instead of the useRoutes hook:

jsx

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

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

The Routes component is functionally equivalent to useRoutes but doesn't require a separate child component.

Testing environments

In test files using Jest or Vitest, remember to wrap components that use useRoutes with a Router provider:

jsx

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

test('renders component', () => {
  render(
    <BrowserRouter>
      <ComponentUsingUseRoutes />
    </BrowserRouter>
  );
});

Context sharing with libraries

Some UI frameworks (like react-admin) provide their own Router wrappers. If you're adding react-router-dom to such projects, ensure you're not creating conflicting Router contexts. Use the framework's provided routing mechanisms instead of adding your own Router.

Frequently asked questions

What does "useRoutes() may be used only in the context of a Router component" mean?: The useRoutes hook in React Router v6 is a powerful way to define routes programmatically using a JavaScript object configuration instead of JSX components. However, this hook relies on React's Context API to access routing information provided by a Router component (such as BrowserRouter, HashRouter, or MemoryRouter). When you call useRoutes in a component that isn't wrapped by a Router component, React Router cannot find the necessary context and throws this error.
How do I fix "useRoutes() may be used only in the context of a Router component"?: This error occurs when the useRoutes hook is called outside of a Router provider in React Router v6. The hook requires access to the Router context to function properly.
What causes "useRoutes() may be used only in the context of a Router component"?: Using useRoutes in a component that's not a child of BrowserRouter or another Router component Calling useRoutes in the same component where you're rendering the Router wrapper Router component placed below the component using useRoutes in the component tree
Is the "useRoutes() 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.

Official resources & further reading

📚React Official Documentation
useRoutes() may be used only in the context of a Router component
📖
React Router useRoutes API documentation(Official Docs)
🐙
React Router GitHub issue #7706(GitHub)
📝
React Router V6 useRoutes error guide