How To Fix Error “UseRoutes() May Be Used Only In The Context Of Router Component” In React

Do you want to find the answer for error message: “useRoutes() may be used only in the context of Router component” in React? This whole article is what you are looking for.

What causes the error?

The useRoutes() hook uses the context provided by the Router component, so it must be nested inside the Router. You will get an error when using useRoutes() hook outside the context of React component.

Case of the error

Here is an example to help you better visualize the error case:

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

export default function MainMenu() {
    function HomePage() {
      	return <div><h1>Welcome to HomePage</h1></div>;
    }
  
 	function Products() {
      	return (
          	<div>
            	<h1>This is Products Page</h1>
            	<ul>
                  	<li>Shirts</li>
                  	<li>Jeans</li>
            	</ul>
          	</div>
        );
    }

	function Shirts() {
      	return ( 
          	<div>
            	<h1>All Shirts</h1>
          	</div>
        );
    }

	function Jeans() {
      	return (
      		<div>
            	<h1>All Jeans</h1>
          	</div>
        );
    }

    let elements = useRoutes([
        {path: '/homepage', element: <HomePage />},
        {
        	path: "/products", 
          	element: <Products />,
            children: [
                {
                    path: "shirts",
                    element: <Shirts />,
                },
                { 
                    path: "jeans", 
                    element: <Jeans /> 
                },
            ]
       	},
    ]);

	return elements;
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import MainMenu from './MainMenu';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <MainMenu />
);

Output:

Errors will definitely occur in this case. You can see the reason for the error is that we didn’t wrap <MainMenu /> in a ‘Router’ component.

Solutions for error “useRoutes() may be used only in the context of a Router component”

Now let’s move on to a solution to fix the error “useRoutes() may be used only in the context of a Router component”.

Take a look at the example above. Now we will modify this program so that there is no error. You only need to make a small change in the index.js file. So open it up and edit it as follows.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import MainMenu from './MainMenu';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<BrowserRouter>
    	<MainMenu />
  	</BrowserRouter>
);

As you can see, the change here is that we have added the BrowserRouter component from the react-router-dom module to wrap around the MainMenu component. So we have successfully fixed the problem. You can start using the useRoutes() hook in your project now.

Please note that:

You should wrap your entire React application inside a React component in the index.js file, as this file is your project’s entry. Now you can safely use any hooks provided by the react-router-dom module because the React component already wraps them.

One thing worth noting is that using the useRoutes() hook and the ‘Routes’ component have identical functionality. So if you are unfamiliar with using the useRoutes() hook, you can switch to using the familiar component ‘Routes’ to avoid errors in the future.

Summary

In conclusion, I have provided you with a solution to the error “useRoutes() may be used only in the context of Router component” in React. Try applying it to your program to get the result. Thanks for your reading!

Maybe you are interested:

• Call multiple functions onClick in React
• useNavigate() may be used only in the context of a Router component
• useLocation() may be used only in the context of a Router component
• React refers to UMD global, but the current file is a module

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js