No component being rendered on router.push(‘/page’) unless reloaded

On successful login, I’m embedding the user token in browser cookies and using router.push('/dashboard') to take the user to his dashboard, but the ‘/dashboard’ page is not rendering any components unless I trigger a reload, on which all the components are rendered on the screen.

Code block from /login page:

const Auth = () => {
  const [
    verifyOTPMutation,
    { data: verifyOTPRes, loading, error: verifyOtpError },
  ] = useMutation(VerifyOTP, {
    variables: {
      mobileNumber: phoneInput,
      mobileCountryCode: countryCodeInput,
      otp: otpInput,
    },
  }
);

useEffect(() => {
  if (!verifyOTPRes) {
    return;
  }

  if (verifyOTPRes) {
    setCookies(
      "token",
      verifyOTPRes.accessToken,
      { maxAge: 60 * 60 * 24 * 7, }
    );
  }

  router.replace(`/dashboard`);
}, [verifyOTPRes]);

return (
<>
  <h6>Enter OTP</h6>

  <input
    onChange={e => {
      setOTPInput(parseInt((e.target as HTMLInputElement).value));
    }}
  ></input>

  <button onClick={() => verifyOTPMutation()}>
    Verify OTP
  </button>
  </>
)}

Code block from /dashboard page:

const Courses = () => {
  return <h1>My Dashboard</h1>;
};

which on first returns a blank white page and on if reloaded, returns:

<h1>My Dashboard</h1>

Answer

Since I had to trigger an update, I went ahead with using window.location.href(‘/dashboard’) which worked. Thanks, @Abhinay.

Advertisement

Answer