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” occurs in React when you use <Link> component outside the Router context in React Router. To solve this issue, wrap the <Link> component by the <Router/> component.

How to solve “useHref() may be used only in the context of a <Router> component”

To solve the error “useHref() may be used only in the context of a <Router> component”,  import BrowserRouter as Router from react-router-dom and wrap all <Link>, <Routes>, and <Route> components with the <Router> component. Thus, the error was resolved. Here is an example.

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>;
}

As a best practice, we are going to add the 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, wrap the entire <App/> component with the <Router> component in index.js. By wrapping the entire <App/>, any hooks and components from React Router can be used anywhere in the React application. Our index.js file becomes like this.

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”.

BrowserRouter(<Router> component) uses the HTML5 history API like pushstate, replacestate, or popstate to keep your UI in sync with the URL. It should be a parent component used to store all other child components. That is why we wrapped the whole <App/> component in index.js file.

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.