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

The “Uncaught error: useHref() may be used only in the context of a <Router> component” occur in React when we use <Link> component outside the Router context in React Router. To solve this issue, we have to wrap the <Link> component by the <Router/> component.

Let us explain its solution with below sample code.

import React from 'react';
import {BrowserRouter as Router, Route, Link, Routes} from 'react-router-dom';

export default function App() {
  	return (
    	<>  
      		<Router>  
          		<nav>
            		<ul>
              			<li>
                			<Link to="/">Home</Link>
              			</li>
              			<li>
                			<Link to="/contact">Contact</Link>
              			</li>	
            		</ul>
          		</nav>
	
          		<Routes>
            		<Route path="/" element={<Home />} />
            		<Route path="/contact" element={<Contact />} />
          		</Routes>
        	</Router> 
    	</>
  	);
}

function Home() {
  return <p>Home</p>;
}

function Contact() {
	return <p>Contact</p>;
}

In the above code, we have imported BrowserRouter as Router from react-router-dom. Next, all <Link>, <Routes> and <Route> with <Router> component. Thus, the error was resolved.

We can make some modifications to this code and can add a Router component in the index.js file. The index.js is the better place to add the Router component because it is the entry file of the whole application. So we can wrap the entire <App/> component with the <Router> component in index.js. So that we can use all components and hooks from React Router anywhere in the application. The below code explains how to use Router in index.js.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  	<React.StrictMode>
      	<Router>
          	<App />
      	</Router>      
  	</React.StrictMode>
);

Here imported {BrowserRouter as Router} from react-router-dom. And wrapped <App/> component with <Router> component.

A <Link> is a component from react-router-dom that the user navigates to another route by clicking on it. A <Link> component renders an accessible <a> element with a href attribute that points to the given route. We pass the path as a value to the ‘to’ prop in the <Link> component.

The useHref hook returns a URL that may be used to link to the given location. The <Link> component uses useHref() hook internally for determining its own href value. That is why if we miss the <Router> component wrapping, React shows an error like “useHref() may be used only in the context of a <Router> component”.

Conclusion

To solve “Uncaught error: useHref() may be used only in the context of a <Router> component” in React, wrap the <Link> component by the <Router/> component which is imported from react-router-dom. It is better to wrap the whole <App/> component with the Router component so that we can use all components and hooks from React Router anywhere in the application.

Related Blogs

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.