title: React Router V6 Routing
body: <p>I am trying to implement a PrivateRoute logic with the newly released Router but it seems it doesn't work as expected..</p>
  <pre class="lang-js prettyprint-override"><code>
  import { Route, Routes, Navigate } from &quot;react-router-dom&quot;;
  
  import LogInPage from &quot;./pages/LogIn&quot;;
  import DashboardPage from &quot;./pages/Dashboard&quot;;
  
  function PrivateRoute({ path, element }) {
    const auth = true;
  
    return (
      &lt;Route
        path={path}
        element={auth === true ? element : &lt;Navigate replace to=&quot;/login&quot; /&gt;}
      /&gt;
    );
  }
  
  function App() {
    return (
      &lt;Routes&gt;
        &lt;Route path=&quot;/*&quot; element={&lt;PageNotFound /&gt;} /&gt;
        &lt;Route path=&quot;/&quot; element={&lt;Navigate replace to=&quot;/dashboard&quot; /&gt;} /&gt;
        &lt;Route path=&quot;/login&quot; element={&lt;LogInPage /&gt;} /&gt;
        &lt;PrivateRoute
          path=&quot;/dashboard&quot;
          element={&lt;DashboardPage /&gt;}
        /&gt;
      &lt;/Routes&gt;
    );
  }
  
  export default App;
  
  
  </code></pre>
  <p>What am I missing? Isn't the PrivateRoute component still a <code>Route</code> component if it is returning a <code>Route</code> ?</p>