How to navigate (redirect) a user to a page after registering the user - React

user_16425029 0
Viewed 353

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?

react-router-dom reactjs javascript
2 Answers

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."
      );
    }
  }
};
user_86908570
user_172998120
Related