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.
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.
The most reliable fix is to wrap your entire application with a Router component in your main entry file (index.js or main.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.
If you're calling useRoutes in the same component where you render the Router, create a separate child component:
// App.js
import { BrowserRouter } from 'react-router-dom';
import AppRoutes from './AppRoutes';
function App() {
return (
<BrowserRouter>
<AppRoutes />
</BrowserRouter>
);
}
export default App;// 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.
If you have conflicting versions of react-router-dom, the context won't work properly. Check your package.json and lock file:
# 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 installEnsure all react-router packages use the same version:
{
"dependencies": {
"react-router-dom": "^6.20.0"
}
}Avoid installing both react-router and react-router-dom as they can conflict.
Make sure your component tree structure is correct:
BrowserRouter (or other Router)
└── Component using useRoutes
└── Your route componentsThe 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.
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:
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:
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.
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React