title: Error "Error: A <Route> is only ever to be used as the child of <Routes> element"
body: <p>I am trying to use routing for the first time and followed the exact instructions from <a href="https://en.wikipedia.org/wiki/Udemy" rel="noreferrer">Udemy</a>:</p>
  <h3>File <em>App.js</em>:</h3>
  <pre><code>import { Route } from &quot;react-router-dom&quot;;
  import Welcome from &quot;./Pages/Welcome&quot;;
  import Game from &quot;./Pages/Game&quot;;
  import Leaderboard from &quot;./Pages/Leaderboard&quot;;
  
  function App() {
      return (
          &lt;div&gt;
              &lt;Route path = &quot;/welcome&quot;&gt;
                  &lt;Welcome /&gt;
              &lt;/Route&gt;
              &lt;Route path = &quot;/game&quot;&gt;
                  &lt;Game /&gt;
              &lt;/Route&gt;
              &lt;Route path = &quot;/leaderboard&quot;&gt;
                  &lt;Leaderboard /&gt;
              &lt;/Route&gt;
          &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>
  <h3>File <em>index.js</em></h3>
  <pre><code>import ReactDOM from 'react-dom';
  import { BrowserRouter } from 'react-router-dom';
  import App from &quot;./App&quot;;
  
  ReactDOM.render(
      &lt;BrowserRouter&gt;
          &lt;App /&gt;
      &lt;/BrowserRouter&gt;,
      document.getElementById('root')
  );
  </code></pre>
  <p>I get the following error:</p>
  <blockquote>
  <p>Error: A Route is only ever to be used as the child of 
  element, never rendered directly. Please wrap your Route in a Routes.</p>
  </blockquote>
  <p>Where have I gone wrong?</p>