title: how can i use Route without getting any errors like this
body: <p>Guys i'm trying to work on my navigation bar and use route but it always shows errors</p>
  <p>I don't know the reason but it isn't  convinced with the routes at all and the error is</p>
  <pre><code>    &quot;index.tsx:19 Uncaught Error: useRoutes() may be used only in the context of a &lt;Router&gt; 
       component.
      at invariant (index.tsx:19)
      at useRoutes (index.tsx:637)
      at Routes (index.tsx:339)
      at renderWithHooks (react-dom.development.js:14985)
      at mountIndeterminateComponent (react-dom.development.js:17811)
      at beginWork (react-dom.development.js:19049)
      at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
      at invokeGuardedCallback (react-dom.development.js:4056)
      at beginWork$1 (react-dom.development.js:23964)
      &quot;
  </code></pre>
  <p>below is my app.jsx code</p>
  <pre><code>import React, { Component } from 'react';
  import Home from './home';
  import {Route,Routes} from &quot;react-router-dom&quot;
  
  class App extends React.Component {
  render() { 
      return (
      &lt;React.Fragment&gt;
          
          &lt;Routes&gt;
              &lt;Route path=&quot;/home&quot; element={&lt;Home /&gt;} /&gt;
          &lt;/Routes&gt;
      
      
      
      &lt;/React.Fragment&gt;
      
      
      );
   }
  }
  
  export default App;
  </code></pre>
  <p>and my navigation is this code as well</p>
  <pre><code>import React, { Component } from 'react';
  import { NavLink } from 'react-router-dom';
  import&quot;./home.css&quot;;
  
  const Home = () =&gt; {
   return (
  &lt;React.Fragment&gt;
      &lt;nav className=&quot;navbar navbar-expand-lg &quot;&gt;
           &lt;div className=&quot;container-fluid&quot;&gt;
              &lt;i className=&quot;fas fa-paw fa-2x&quot;&gt;&lt;/i&gt;
              &lt;a className=&quot;navbar-brand &quot; href=&quot;#&quot; &gt;Pets Forever&lt;/a&gt;
              &lt;div className=&quot;collapse navbar-collapse justify-content-end&quot; id=&quot;navbarNav&quot;&gt;
                  &lt;ul className=&quot;navbar-nav mr-auto&quot;&gt; 
                      &lt;li className=&quot;nav-item active&quot;&gt;
                          {console.log(&quot;shit&quot;)}
                          &lt;a className=&quot;nav-link&quot; href=&quot;/home&quot;&gt;Home &lt;span className=&quot;sr-only&quot;&gt; 
   (current)&lt;/span&gt;&lt;/a&gt;
                          {console.log(&quot;shit2&quot;)}
  
                      &lt;/li&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                          &lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Shop&lt;/a&gt;
                          {console.log(&quot;shit3&quot;)}
  
                      &lt;/li&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                          &lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Contact Us&lt;/a&gt;
                          {console.log(&quot;shit4&quot;)}
  
                      &lt;/li&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                          &lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Login&lt;/a&gt;
                          {console.log(&quot;shit5&quot;)}
  
                      &lt;/li&gt;
                      &lt;li className=&quot;nav-item&quot;&gt;
                          &lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;Sign Up&lt;/a&gt;
                          {console.log(&quot;shit6 &quot;)}
  
                      &lt;/li&gt;
              
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
  &lt;/React.Fragment&gt; 
  
  );
  }
  
  export default Home;
  </code></pre>
  <p>though i was working navlink and yet it didn't work and showed some weird error but i need to work this route first please</p>