title: Error: useRoutes() may be used only in the context of a <Router> component even if the app is wrapped around BrowserRouter
body: <p>I need to route between 2 paths,
  I installed <code>npm install react-router</code> (react-router: 6.2.1 and react-router-dom: 5.2.0).</p>
  <p>I get a error saying in the webpage <code>Error: useRoutes() may be used only in the context of a &lt;Router&gt; component.</code> which eventually meant I din't warp my index.js file with BrowserRouter but I did.</p>
  <p>Code:
  <strong>index.js</strong></p>
  <pre><code>import {BrowserRouter as Router}  from &quot;react-router-dom&quot;;
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
    &lt;Router&gt;
      &lt;App /&gt;
      &lt;/Router&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById(&quot;root&quot;)
  );
  </code></pre>
  <p><strong>app.js</strong></p>
  <pre><code>function App() {
    return (
    &lt;&gt;
      &lt;Routes&gt;
      &lt;Route path =&quot;/&quot; element={&lt;Main /&gt;} /&gt;
      &lt;Route path =&quot;gigs&quot; element={&lt;Gigs /&gt;} /&gt;
      &lt;/Routes&gt;
  &lt;/&gt;
    );
  }
  </code></pre>