title: How can I resolver " useHref() may be used only in the context of a <Router> component" when component is already inside <Router>?
body: <p>I am currently writing Jest tests for my react app.</p>
  <p>When I run the tests for <code>&lt;Container /&gt;</code>, the error message shows:</p>
  <p>&quot; useHref() may be used only in the context of a  component.&quot;</p>
  <p>However, <code>&lt;Container /&gt;</code> is already inside <code>&lt;Router/&gt;</code>.</p>
  <p>I have read other similar questions on here, and the answers all say to put the component inside the <code>&lt;Router/&gt;</code>, which is what I did.</p>
  <p>Container.test.js</p>
  <pre><code>import { render, unmountComponentAtNode } from 'react-dom';
  import Container from '../components/Container.tsx';
  import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
  import { configure, shallow, mount } from 'enzyme';
  import { Provider, useDispatch } from 'react-redux';
  import { act } from &quot;react-dom/test-utils&quot;;
  import configureStore from 'redux-mock-store';
  
  configure({adapter: new Adapter()});
  
  const initState = { allCard: [], expansions: [] };
  const mockStore = configureStore();
  const wrapper = mount(&lt;Provider store={mockStore(initState)}&gt;&lt;Container/&gt;&lt;/Provider&gt;);
  
  describe('Container', () =&gt; {
  
      let container = null;
      beforeEach(() =&gt; {
      // setup a DOM element as a render target
      container = document.createElement(&quot;div&quot;);
      document.body.appendChild(container);
      });
  
      afterEach(() =&gt; {
      // cleanup on exiting
      unmountComponentAtNode(container);
      container.remove();
      container = null;
      });
  
      it('renders itself and its children without crashing', () =&gt; {
          render(&lt;Provider store={mockStore(initState)}&gt;&lt;Container /&gt;&lt;/Provider&gt;, container);
      });
  
      it('renders itself without crashing', () =&gt; {
          const tree = wrapper.render();
          expect(tree.toJSON).toMatchSnapshot();
          });
  });
  </code></pre>
  <p>App.js</p>
  <pre><code>import './App.css';
  import Container from './components/Container';
  import About from './components/RouteComponents/About';
  import NavBar from './components/NavBar';
  import Tutorials from './components/RouteComponents/Tutorials';
  import Suggest from './components/RouteComponents/Suggest';
  import Report from './components/RouteComponents/Report';
  import { Route, Routes, BrowserRouter as Router } from 'react-router-dom';
  import GlobalStyles from './components/styled/Globals.styled';
  import { useState, createContext } from 'react';
  
  function App() {
    const [ darkMode, setDarkMode ] = useState(false);
  
    return (
      &lt;Router&gt; 
        {darkMode? &lt;GlobalStyles/&gt; : null}
          &lt;div className=&quot;App&quot;&gt;
            &lt;NavBar darkMode={darkMode} setDarkMode={setDarkMode}/&gt;
            &lt;Routes&gt;
              &lt;Route path='/' element= {&lt;UserContext.Provider value={darkMode}&gt;
                                            &lt;Container /&gt;
                                        &lt;/UserContext.Provider&gt;} /&gt;
              &lt;Route path='/about' element={&lt;About /&gt;} /&gt;
              &lt;Route path='/tutorial' element= {&lt;Tutorials /&gt;} /&gt;
              &lt;Route path='/suggest' element={&lt;Suggest /&gt;} /&gt;
              &lt;Route path='/report' element= {&lt;Report /&gt;} /&gt;
            &lt;/Routes&gt;
          &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  export const UserContext = createContext(null);
  export default App;
  </code></pre>
  <p>Container.tsx</p>
  <pre><code>import { useEffect, ReactElement } from 'react';
  import axios from 'axios';
  import { Link } from 'react-router-dom';
  import { useDispatch } from 'react-redux'
  import ErrorBoundary from './ErrorBoundary';
  import ExpansionView from './ExpansionView';
  import DisplayView from './DisplayView';
  import SearchCard from './SearchCard';
  import MurlocTidehunter from '../image/murlocTidehunter.png';
  import SelectExpanionsMurloc from '../image/selectExpansions.png';
  import { StyledContainer } from './styled/Container.styled';
  import { eliminateMurloc } from '../utils/eliminateMurloc';
  
  // Component - parent component that fetches allCard once when app launches
  const Container = (): ReactElement =&gt; {
      const dispatch = useDispatch();
      
      useEffect(() =&gt; {
          const options: object = {
              method: 'GET',
              url: 'https://omgvamp-hearthstone-v1.p.rapidapi.com/cards',
              params: {collectible: '1'},
              headers: {
              'x-rapidapi-host': 'omgvamp-hearthstone-v1.p.rapidapi.com',
              'x-rapidapi-key': 'xxxxxxxxxx'
              }
          };
         
          // function to fetch all collectible cards from hearthstone api
          const fetchAllCards = async (): Promise&lt;any&gt; =&gt; {
              try {
                  const response = await axios.request(options); 
                  dispatch({type: 'SET_ALL_CARD', payload: response.data})
              } catch(e) {
                  console.log(e)
              }
          }
          fetchAllCards();
      }, []);
  
      return (
          &lt;StyledContainer&gt;
              &lt;h1 id='hearthfin'&gt;Hearthfin&lt;/h1&gt;
              &lt;img id='tideHunter' className='deletableMurloc' src={MurlocTidehunter} alt=&quot;Hearthstone Murloc Analisis Videojuegos Zehngames - Murloc@seekpng.com&quot; /&gt;
              &lt;img id='selectExpMurloc' className='deletableMurloc' onClick={() =&gt; eliminateMurloc('selectExpMurloc')} src={SelectExpanionsMurloc} alt=&quot;Murloc that say select expansions first!&quot; /&gt;
              &lt;ErrorBoundary&gt;
                  &lt;ExpansionView /&gt; 
              &lt;/ErrorBoundary&gt;
              &lt;ErrorBoundary&gt;
                  &lt;DisplayView /&gt;
              &lt;/ErrorBoundary&gt;
              &lt;p id='missingCard'&gt;See a missing AOE card? Make a suggestion &lt;Link to='suggest'&gt;here!&lt;/Link&gt;&lt;/p&gt;
              &lt;ErrorBoundary&gt;
                  &lt;SearchCard /&gt;
              &lt;/ErrorBoundary&gt;
              &lt;br/&gt;
             
          &lt;/StyledContainer&gt;
      );
  }
  
  export default Container;
  </code></pre>