[Solved] Error: useHref() may be used only in the context of a component

I am facing the following error with react-router: Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/blog in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.

How This Error: useHref() may be used only in the context of a <Router> component Occurs?

I am facing the following error with react-router:

Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/blog

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve this Error: useHref() may be used only in the context of a <Router> component?

Solution 1

To Solve this Error: useHref() may be used only in the context of a <Router> component You have to use Component inside Router and then Your error will be solved. Problem is that Link component relies on the context that the Router component passes down. So Whenever You are trying to use Link Make sure to Wrap Link with Router. Here is my example.

<Router>
     <div>
     <nav>
       <ul>
         <li>
           <Link to="/">Home</Link>
         </li>
         <li>
           <Link to="/blog">Blog</Link>
         </li>
       </ul>
     </nav>
   </div>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/blog" element={<Blog />} />
  </Routes>
</Router>

And After Wrapping the Link in the Router Your error will be solved. Thank You.

Solution 2: Wrap Entire App With BrowserRouter

You can wrap your entire App With BrowserRouter and then Your error will be solved. Here is my example.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { App }  from './components/App/App.jsx';


ReactDOM.render(
  <React.StrictMode>

    <BrowserRouter>  // Wrap This
      <App />
    </BrowserRouter>

  </React.StrictMode>,
  document.getElementById('root')
);

BrowserRouter is passing context to route And now, Your error will be resolved. Thanks.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Error: A Route is only ever to be used as the child of element, never rendered directly. Please wrap your Route in a Routes
• ‘App’ cannot be used as a JSX component
• react/prop-types X; is missing in props validation
• Error 1273 (HY000) at line 25 Unknown collation: ‘utf8mb4_0900_ai_ci’
• SyntaxError: Unexpected token < in JSON at position 0