Quiero autenticar al usuario y redirigirlo a la página de inicio después. Cuando envío este formulario, se establece el estado redux, pero el usuario no es redirigido a la página de inicio en el primer envío; Tengo que enviar dos o, a veces, tres veces para que me redirija correctamente a la página de inicio.

¿Alguna idea de lo que puedo estar haciendo mal?

 async function login(e) { e.preventDefault() const response = await axios.post("http://localhost:3001/login", { email, password }, { withCredentials: true }) if (response.data.auth) { history.push("/") store.dispatch({ type: "setUser", payload: response.data }) } }

Aquí está mi código para el formulario de inicio de sesión.

 <form className="login_form" onSubmit={(e)=> login(e)}> <label>Email</label> <input type="text" onChange={e=> setEmail(e.target.value)} required placeholder="enter your email"/> <label>Password</label> <input type="password" onChange={e=> setPassword(e.target.value)} required placeholder="enter your password"/> <div className="login_btn_div"> <button className="route_to_register_btn" onClick={()=> history.push("/register")} type="button">Create account</button> <button className="login_submit_btn" type="submit">Sign in</button> </div> </form>

Aquí inicializo el historial en su propio archivo y lo paso al componente raíz como accesorio.

 const createHistory = require("history").createBrowserHistory export default createHistory();