I want to redirect a user to a page that informs the user to check his email for verification immediately after registration. I am trying to use Navigate from react-router-dom but the return statement was not being executed. Below is my code
API call
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."
);
}
}
};
component calling the 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);
}
}
};
what should I do to redirect the user immediately after registering?
You can't return JSX from a callback like this and expect it to be rendered and affect any change. In other words, the Navigate component isn't actually rendered into the DOM to do anything.
Use the useNavigate hook to access a navigate function as part of a resolved Promise from the userRegister function. Pass the navigate function to the handler.
Example:
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."
);
}
}
};
I think the return should be wrapped with brackets like this
return(
<>
<Navigate to="/verify-email" />
</>
)
Here's more info https://www.pluralsight.com/guides/return-variable-in-render-function-in-react