Estaba trabajando en un proyecto cuando resultó que cuando envié una acción e intenté navegar a la ruta /home después de hacer una llamada asíncrona a mi API y usar la palabra clave await para esperar mi respuesta, no estaba funcionando.
Reproduzco el problema en un simple enlace de códigos y caja de aplicación de reacción
El problema con el siguiente código es que no navega a la ruta principal cuando isLogged es verdadero.
aplicación.js
import "./styles.css"; import { useSelector } from "react-redux"; import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"; import Home from "./component/Home"; import Login from "./component/Login"; export default function App() { const { isLogged } = useSelector((state) => state.auth); console.log("rendered"); return ( <div className="App"> <Router> <Routes> <Route path="/" element={<Login />} /> <Route path="/home" element={isLogged ? <Home /> : <Login />} /> <Route path="*" element={<Navigate to="/" />} /> </Routes> </Router> </div> ); }Iniciar sesión.jsx
import { useState } from "react"; import Forms from "./Forms"; const Login = () => { const [openform, setOpenForm] = useState(false); return ( <div className="login"> {openform && <Forms />} {!openform && ( <button onClick={() => setOpenForm(!openform)}> click to open Form </button> )} </div> ); }; export default Login;Formularios.jsx
import { useDispatch } from "react-redux"; import { useNavigate } from "react-router-dom"; import { setIsLogged } from "../store/authSlice"; const Forms = () => { const dispatch = useDispatch(); const navigate = useNavigate(); var goToHome = () => { dispatch(setIsLogged(true)); navigate("/home"); }; const submit = () => { setTimeout(() => { console.log("finished"); goToHome();//It works if I call the goToHome method straight without using the timeout. }, 2000); }; return ( <form action=""> <input type="text" placeholder="enter your name" /> <button onClick={submit}>click to login</button> </form> ); }; export default Forms;El código no impide que se produzca la acción del formulario predeterminado, lo que provoca que la página se vuelva a cargar y que toda la aplicación React se vuelva a montar. Consuma el objeto de evento onSubmit y llame a preventDefault en él.
Ejemplo:
const Forms = () => { const dispatch = useDispatch(); const navigate = useNavigate(); const goToHome = () => { dispatch(setIsLogged(true)); navigate("/home"); }; const submit = (e) => { // <-- consume onSubmit event object e.preventDefault(); // <-- prevent default form action setTimeout(() => { goToHome(); }, 2000); }; return ( <form action=""> <input type="text" placeholder="enter your name" /> <button onClick={submit}>click to login</button> </form> ); };