Estoy creando una página de inicio de sesión básica en este momento y soy nuevo para reaccionar. Hasta ahora, la página me redirige con éxito a la página '/iniciar sesión' ya que no he iniciado sesión. Después de iniciar sesión, obtengo un archivo console.log de 'Iniciar sesión como invitado' que es lo que quiero por ahora, sin embargo, no ser redirigido a la página de inicio. ¿Puede alguien ayudarme con esto?

El código relevante está después de la llamada de devolución, pero lo dejé todo allí por contexto.

¡Muchas gracias!

 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: "guest", password: "guest", } const [user, setUser] = useState({username: "", password: ""}) const [error, setError] = useState(""); const Login = details => { console.log(details); if(details.username == guestUser.username && details.password == guestUser.password) { console.log("Logged in as guest"); setUser({ username: details.username, }); } else { console.log("details do not match"); setError("Details do not match.") } } const Logout = () => { console.log("logout"); } return ( <div className="App"> <Router> <Routes> <Route path="/Login" element={<Intro Login={Login} Logout={Logout} error={error}/>} /> <Route path="/Home" element={<Home user={user}/>}/> <Route path="" element={user.username !== "" ? <Navigate to ="/Home" /> : <Navigate to ="/Login"/>}/> </Routes> </Router> </div> ); } export default App;