title: useNavigate() may be used only in the context of a <Router> component
body: <p>My code currently is this and I'm trying to add this button that goes back to the previous page using <code>react-router-dom</code> but I get the below error and also all the components on my website disappears.</p>
  <p>Error:</p>
  <pre><code>useNavigate() may be used only in the context of a component
  </code></pre>
  <p>My code:</p>
  <pre><code>function App() {
    const navigate = useNavigate();
    return (
      &lt;BrowserRouter&gt;
        &lt;div&gt;
        &lt;button onClick={() =&gt; navigate(-1)}&gt;go back&lt;/button&gt;
          &lt;Nav/&gt;
          &lt;Routes&gt;
            &lt;Route exact path=&quot;/&quot; element={&lt;Home/&gt;}/&gt;
            &lt;Route exact path=&quot;/home&quot; element={&lt;Home/&gt;}/&gt;
            &lt;Route exact path=&quot;/upcoming/:user&quot; element={&lt;Upcoming/&gt;}/&gt;
            &lt;Route exact path=&quot;/record/:user&quot; element={&lt;Record/&gt;}/&gt;
            &lt;Route path=&quot;*&quot; element={&lt;NotFound/&gt;}/&gt;
          &lt;/Routes&gt;
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  </code></pre>
  <p>And this is the error I got in console:</p>
  <p><img src="https://i.stack.imgur.com/5k8AI.png" alt="Error" /></p>