Quiero redirigir a un usuario a una página que le informa que revise su correo electrónico para verificarlo inmediatamente después del registro. Estoy tratando de usar Navigate desde react-router-dom pero la declaración de devolución no se estaba ejecutando. A continuación se muestra mi código
llamada a la API
import { ToastNotification } from "../components/ToastNotification"; import axiosInstance from "../utils/axiosInstance"; import { Navigate } from "react-router-dom"; export const userRegister = async (email, password, regd_as) => { const body = JSON.stringify({ email, password, regd_as }); try { const response = await axiosInstance.post(`/account/signup/`, body); if (response.status === 201) { ToastNotification("Account has been created successfully.", "success"); return <Navigate to="/verify-email" />; //this is not being executed } } catch (error) { if (error.response) { if ( error.response.status === 400 && error.response.data.message === "User Exists" ) { ToastNotification("Account already exists.", "error"); } else { ToastNotification( "We are facing some problems. Please try registering later.", "error" ); } } else if (error.request) { ToastNotification( "We are facing some problems. Please try registering some time later." ); } } };componente que llama a la API
const formDataSubmit = (e) => { e.preventDefault(); if (password !== conPassword) { ToastNotification( "Password and Confirm Password did not match.", "error" ); } else { if (regd_as === "") { ToastNotification(`"Registered As" cannot be blank`, "info"); } else { userRegister(email, password, regd_as); } } };¿Qué debo hacer para redirigir al usuario inmediatamente después de registrarse?
No puede devolver JSX desde una devolución de llamada como esta y esperar que se procese y afecte cualquier cambio. En otras palabras, el componente Navigate en realidad no se representa en el DOM para hacer nada.
Use el useNavigate para acceder a una función de navigate como parte de una promesa resuelta de la función userRegister . Pase la función de navigate al controlador.
Ejemplo:
import { useNavigate } from 'react-router-dom'; ... const navigate = useNavigate(); ... const formDataSubmit = (e) => { e.preventDefault(); if (password !== conPassword) { ToastNotification( "Password and Confirm Password did not match.", "error" ); } else { if (regd_as === "") { ToastNotification(`"Registered As" cannot be blank`, "info"); } else { userRegister(email, password, regd_as, navigate); // <-- pass navigate function } } };...
import { ToastNotification } from "../components/ToastNotification"; import axiosInstance from "../utils/axiosInstance"; export const userRegister = async (email, password, regd_as, navigate) => { const body = JSON.stringify({ email, password, regd_as }); try { const response = await axiosInstance.post(`/account/signup/`, body); if (response.status === 201) { ToastNotification("Account has been created successfully.", "success"); return navigate("/verify-email" { replace: true }); // <-- issue imperative redirect } } catch (error) { if (error.response) { if ( error.response.status === 400 && error.response.data.message === "User Exists" ) { ToastNotification("Account already exists.", "error"); } else { ToastNotification( "We are facing some problems. Please try registering later.", "error" ); } } else if (error.request) { ToastNotification( "We are facing some problems. Please try registering some time later." ); } } };Creo que el retorno debe estar envuelto con corchetes como este
return( <> <Navigate to="/verify-email" /> </> )Aquí hay más información https://www.pluralsight.com/guides/return-variable-in-render-function-in-react