React Router useRoutes() Context Error

Problem Statement

When working with React Router v6, developers often encounter the error: Error: useRoutes() may be used only in the context of a <Router> component. This occurs when trying to use the useRoutes hook outside the proper router context.

The core issue is that useRoutes() requires access to React Router's context, which is only available when your component is wrapped by a router component like BrowserRouter.

Solution

Proper Router Setup

The most common solution is to ensure your entire application is wrapped in a router component at the highest level. Here's the recommended approach:

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

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

const App = () => {
  const routes = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'o-nama', element: <About /> },
    // Other routes...
  ]);

  return routes;
};

export default App;

Alternative Approaches

If you prefer to keep the router within your App component:

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

const AppRoutes = () => {
  const routes = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'about', element: <About /> },
  ]);
  return routes;
};

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

export default App;

Common Pitfalls and Solutions

1. Incorrect Import Source

WARNING

Ensure you're importing from react-router-dom, not react-router

// Wrong - will cause context errors
import { useRoutes } from 'react-router';

// Correct
import { useRoutes } from 'react-router-dom';

2. Multiple React Router Versions

If you're using npm/yarn workspaces or monorepo structure, check that there's only one version of react-router-dom installed. Multiple versions can cause context conflicts.

3. Router Placement in Component Tree

TIP

The router must wrap all components that use routing features, including those using useRoutes(), useNavigate(), or other routing hooks.

Best Practices

1. Single Router: Use only one router at the top level of your application
2. Consistent Imports: Always import from react-router-dom
3. Version Consistency: Ensure all team members use the same React Router version
4. Testing: When testing components that use routing, remember to wrap them with a router or memory router

Related Components

React Router v6 provides several router types for different environments:

• BrowserRouter - For web applications with clean URLs
• HashRouter - For web applications with hash-based URLs
• MemoryRouter - For testing and non-browser environments
• StaticRouter - For server-side rendering

Conclusion

The useRoutes() context error is easily resolved by ensuring your component hierarchy is properly wrapped with a router component. The most reliable approach is to wrap your entire application in a BrowserRouter at the entry point, which provides the necessary context for all routing functionality throughout your app.