title: How to fix public route in react router v6 showing the login for a spli second
body: <p>I have a problem with public and private route. In which when the user is already authenticated the private and public routes work. But for some reason when I refresh to the homepage it shows the login page for a split second.</p>
  <p>How do i fix this?</p>
  <p><strong>PRIVATE ROUTE</strong></p>
  <pre><code>const PrivateRoute = () =&gt; {
    const auth = useAuth();
  
    if (!auth.user) {
      return &lt;Navigate to=&quot;/login&quot; /&gt;;
    }
  
    return &lt;Outlet /&gt;;
  };
  </code></pre>
  <p><strong>PUBLIC ROUTE</strong></p>
  <pre><code>const PublicRoute = () =&gt; {
    const auth = useAuth();
    if (auth.user) {
      return &lt;Navigate to=&quot;/&quot; /&gt;;
    }
  
    return &lt;Outlet /&gt;;
  };
  </code></pre>
  <p><strong>APP</strong></p>
  <pre><code>&lt;Routes&gt;
    &lt;Route element={&lt;PublicRoute /&gt;}&gt;
      &lt;Route path=&quot;/login&quot; element={&lt;Login /&gt;} /&gt;
      &lt;Route path=&quot;/register&quot; element={&lt;Register /&gt;} /&gt;
    &lt;/Route&gt;
    &lt;Route element={&lt;PrivateRoute /&gt;}&gt;
      &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
      &lt;Route path=&quot;/message&quot; element={&lt;Message /&gt;} /&gt;
    &lt;/Route&gt;
  &lt;/Routes&gt;
  </code></pre>