No component being rendered on router.push('/page') unless reloaded-CodePudding

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>

CodePudding user response：

You are using route.replace() which is responsible for replacing the url without reloading the page.

the replace() method can be used to update the URL displayed in the address bar without reloading the page:

Refer: https://iq.js.org/questions/react/what-is-the-purpose-of-push-and-replace-methods-of-history

try using router.push() instead.

CodePudding user response：

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