title: Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences
body: <p>I have a navbar that is rendered in every route while the route changes on click.</p>
  <p>./components/navbar.jsx</p>
  <pre><code>import React, { Component } from 'react';
  import '../App.css';
  import { Link } from 'react-router-dom';
  
  
  
  class Navbar extends Component {
      constructor(props) {
          super(props);
          this.state = {};
      }
      render() {
          return (
              &lt;div id = 'navbar'&gt;
  
                  &lt;div className='name-head'&gt;
                      My Name
                  &lt;/div&gt;
              
              
                  &lt;div id = 'nav-links-container'&gt;
                      
                      &lt;Link to='/experiences'&gt;
                          &lt;div className = 'nav-links'&gt;
                              Experiences
                          &lt;/div&gt;
                      &lt;/Link&gt;
  
                      &lt;div className = 'nav-links'&gt;
                          Projects
                      &lt;/div&gt;
  
                      &lt;div className = 'nav-links'&gt;
                          Skills
                      &lt;/div&gt;
  
                      &lt;div className = 'nav-links'&gt;
                          Resume
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  
              &lt;/div&gt;
          );
      }
  }
  
  export default Navbar;
  </code></pre>
  <p>./components/experiences.jsx</p>
  <pre><code>import React, { Component } from 'react';
  
  
  class Experiences extends Component {
      
      render() { 
          return (
              &lt;div&gt;
                  &lt;h1&gt;hi&lt;/h1&gt;
              &lt;/div&gt;
          );
      }
  }
   
  export default Experiences;
  </code></pre>
  <p>index.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import reportWebVitals from './reportWebVitals';
  import Navbar from './components/Navbar';
  import Home from './components/Home';
  import Experiences from './components/experience';
  
  import {
    BrowserRouter as Router, 
    Routes, 
    Route
  } from 'react-router-dom';
  
  
  
  ReactDOM.render(
  
    &lt;React.StrictMode&gt;
  
      &lt;Navbar /&gt;
  
      &lt;Router&gt;
  
        &lt;Routes&gt;
          &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
          &lt;Route path=&quot;/experiences&quot; element={&lt;Experiences /&gt;} /&gt;
        &lt;/Routes&gt;
  
      &lt;/Router&gt;
  
    &lt;/React.StrictMode&gt;,
  
    document.getElementById('root')
  );
  
  
  reportWebVitals();
  </code></pre>
  <p>The error doesn't come when I remove the <code>&lt;Link&gt;</code> from the experiences tag in navbar.
  There is a similar question posted here: <a href="https://stackoverflow.com/questions/69508954/error-usehref-may-be-used-only-in-the-context-of-a-router-component">Error: useHref() may be used only in the context of a &lt;Router&gt; component</a>
  but doesn't help.</p>
  <p>I'm using react router v6</p>