Estoy tratando de implementar una página de inicio de sesión para mi aplicación. Cuando se hace clic en el botón de inicio de sesión, se llama a una búsqueda e intenta iniciar sesión con la información del usuario. Si el inicio de sesión tiene éxito, el valor del botón de inicio de sesión se actualiza para ser la página de inicio; de lo contrario, vuelve a cambiar a la dirección de la página de inicio de sesión. ¿Alguna idea sobre cómo hacer que funcione? Intenté <Link to={redirect?"/home":"/"}> pero no hizo nada, y también intenté usar un accesorio de estado que contiene el valor del enlace pero todavía tuve problemas con él. Código del botón:
<Link to={redirect?"/home":"/"}> <Button onClick={submit} variant="primary" size="lg" className="btn-lg" type="submit" > Login </Button> </Link>enviar (inicio de sesión) código:
const submit = async () => { try { const res = await fetch("http://localhost:2718/user/login", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(form), credentials: 'include', }); if (res.status !== 200) { console.log("Error while trying to sign in"); redirect = false; } else { console.log("ggoood"); redirect = true; } } catch (error) { console.log(error); redirect = false; } };*La variable de redirección es solo una variable booleana
No puede cambiar el destino del enlace después del clic. Se hizo clic en el enlace, la acción de navegación se envía al mismo tiempo que se llama a la devolución de llamada de submit haciendo clic en el botón.
Elimine el Link e importe el gancho useHistory o useNavigate según la versión de react-router-dom . Cuando el controlador de envío se complete imperativamente, emita la redirección en función de la respuesta de autenticación.
// for react-router-dom@5 const history = useHistory(); // for react-router-dom@6 const navigate = useNavigate(); ... const submit = async () => { try { const res = await fetch("http://localhost:2718/user/login", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(form), credentials: 'include', }); if (res.status!==200){ // for react-router-dom@5 history.replace("/"); // for react-router-dom@6 navigate("/", { replace: true }); } else { // for react-router-dom@5 history.replace("/home"); // for react-router-dom@6 navigate("/home", { replace: true }); } } catch (error) { // for react-router-dom@5 history.replace("/"); // for react-router-dom@6 navigate("/", { replace: true }); } }; ... <Button onClick={submit} variant="primary" size="lg" className="btn-lg" type="submit" > Login </Button>