title: React Router Dom doesn't redirect me after signing in
body: <p>I'm creating a basic login page right now and I'm new to react. So far the page redirects me successfully to the '/login' page since I'm not logged in. After I log in I get a console.log of 'Logged in as guest' which is what I want for now, however, I don't get redirected to the home page. Can someone help me with this?</p>
  <p>The relevant code is after the return call but I left it all there for context</p>
  <p>Many thanks!</p>
  <pre><code>import Intro from './components/Intro';
  import SignIn from './components/SignIn';
  import Home from './components/Home';
  import { BrowserRouter as Router, Route, Routes, Navigate, useParams, useNavigate } from 'react-router-dom';
  import './App.css';
  import { useState, useEffect } from 'react';
  
  
  function App() {
  
    const guestUser = {
      username: &quot;guest&quot;,
      password: &quot;guest&quot;,
    }
  
    const [user, setUser] = useState({username: &quot;&quot;, password: &quot;&quot;})
    const [error, setError] = useState(&quot;&quot;);
  
    
    
  
    const Login = details =&gt; {
        console.log(details);
        if(details.username == guestUser.username &amp;&amp; details.password == guestUser.password) {
          console.log(&quot;Logged in as guest&quot;);
          setUser({
            username: details.username,
            
          });
          
          
        } else {
          console.log(&quot;details do not match&quot;);
          setError(&quot;Details do not match.&quot;)
  
        }
    }
  
    const Logout = () =&gt; {
        console.log(&quot;logout&quot;);
    }
  
  
  
    return (
  
      &lt;div className=&quot;App&quot;&gt;
        
        &lt;Router&gt;
          &lt;Routes&gt;
            
            &lt;Route path=&quot;/Login&quot; element={&lt;Intro Login={Login} Logout={Logout} error={error}/&gt;} /&gt;
            &lt;Route path=&quot;/Home&quot; element={&lt;Home user={user}/&gt;}/&gt;
            &lt;Route path=&quot;&quot; 
              element={user.username !== &quot;&quot; ? &lt;Navigate to =&quot;/Home&quot; /&gt; :
              &lt;Navigate to =&quot;/Login&quot;/&gt;}/&gt;
            
            
            
        
        
            
          &lt;/Routes&gt;
  
        &lt;/Router&gt;
          
      &lt;/div&gt;
       
   
      
    );
  }
  
  export default App;
  
  </code></pre>