title: React-router <Route> tag not rendering component
body: <p>I'm running into an issue where my route tag in specific is not rendering any components.</p>
  <p>Steps I have tried:</p>
  <ul>
  <li>Changed import of { Route } from &quot;react-router-dom&quot;.</li>
  <li>Changed paths to see if other paths render.</li>
  <li>Rendered the component within  tags (this worked).</li>
  </ul>
  <p>The issue seems to be coming down to something going on with the  tag.</p>
  <p>Here is a copy of my code:</p>
  <pre><code>import { Component } from &quot;react&quot;;
  //import all components rendered
  import NavBar from &quot;./Nav&quot;;
  import Orders from &quot;./Orders&quot;;
  import Cart from &quot;./Cart&quot;;
  import Menu from &quot;./Menu&quot;;
  import Login from &quot;./Login.jsx&quot;;
  import Home from &quot;./Home.jsx&quot;;
  // for routing
  import { Route } from &quot;react-router&quot;;
  import { BrowserRouter } from &quot;react-router-dom&quot;;
  
  //main App to combine all components and be rendered
  class App extends Component {
      render() {
          return (
              &lt;BrowserRouter&gt;
                  &lt;NavBar /&gt;
                  &lt;Route path=&quot;/&quot; exact component={Login} /&gt;
              &lt;/BrowserRouter&gt;
          )
      }
  }
  
  export default App;
  </code></pre>
  <p>The versions are:</p>
  <pre><code>├─┬ react-router-dom@6.2.1
  │ └── react-router@6.2.1 deduped
  └── react-router@6.2.1
  </code></pre>
  <p>I tried changing the tags to  as per a suggestion and it still didn't work, but I may have implemented it incorrectly. Here is what I tried:</p>
  <pre><code>import { Component } from &quot;react&quot;;
  //import all components rendered
  import NavBar from &quot;./Nav&quot;;
  import Orders from &quot;./Orders&quot;;
  import Cart from &quot;./Cart&quot;;
  import Menu from &quot;./Menu&quot;;
  import Login from &quot;./Login.jsx&quot;;
  import Home from &quot;./Home.jsx&quot;;
  // for routing
  import { Route } from &quot;react-router&quot;;
  import { BrowserRouter, Routes } from &quot;react-router-dom&quot;;
  
  //main App to combine all components and be rendered
  class App extends Component {
      render() {
          return (
              &lt;Routes&gt;
                  &lt;NavBar /&gt;
                  &lt;Route path=&quot;/&quot; exact component={Login} /&gt;
              &lt;/Routes&gt;
          )
      }
  }
  
  export default App;
  </code></pre>
  <p>The errors I am getting on the console are:</p>
  <pre><code>Uncaught Error: useRoutes() may be used only in the context of a &lt;Router&gt; component.
      Choo 3
      React 17
      Choo 2
      Webpack 3
  </code></pre>
  <pre><code>The above error occurred in the &lt;Routes&gt; component:
  
  Routes@http://localhost:3000/static/js/bundle.js:54433:7
  App@http://localhost:3000/static/js/bundle.js:42:1
  </code></pre>
  <p>Any help would be greatly appreciated!</p>
  <p>Solution:</p>
  <p>Was resolved by switching the &quot;component&quot; tag to &quot;element&quot; tag and removing the  tag outside as follows:</p>
  <pre><code>            &lt;&gt;
                  &lt;NavBar /&gt;
                  &lt;Routes&gt;
                      &lt;Route path=&quot;/&quot; exact element={&lt;Login /&gt;} /&gt;
                  &lt;/Routes&gt;
              &lt;/&gt;
  </code></pre>