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:
JavaScript
x
45
45
1
const Auth = () => {
2
const [
3
verifyOTPMutation,
4
{ data: verifyOTPRes, loading, error: verifyOtpError },
5
] = useMutation(VerifyOTP, {
6
variables: {
7
mobileNumber: phoneInput,
8
mobileCountryCode: countryCodeInput,
9
otp: otpInput,
10
},
11
}
12
);
13
14
useEffect(() => {
15
if (!verifyOTPRes) {
16
return;
17
}
18
19
if (verifyOTPRes) {
20
setCookies(
21
"token",
22
verifyOTPRes.accessToken,
23
{ maxAge: 60 * 60 * 24 * 7, }
24
);
25
}
26
27
router.replace(`/dashboard`);
28
}, [verifyOTPRes]);
29
30
return (
31
<>
32
<h6>Enter OTP</h6>
33
34
<input
35
onChange={e => {
36
setOTPInput(parseInt((e.target as HTMLInputElement).value));
37
}}
38
></input>
39
40
<button onClick={() => verifyOTPMutation()}>
41
Verify OTP
42
</button>
43
</>
44
)}
45
Code block from /dashboard
page:
JavaScript
1
4
1
const Courses = () => {
2
return <h1>My Dashboard</h1>;
3
};
4
which on first returns a blank white page and on if reloaded, returns:
JavaScript
1
2
1
<h1>My Dashboard</h1>
2
Advertisement
Answer
Since I had to trigger an update, I went ahead with using window.location.href(‘/dashboard’) which worked. Thanks, @Abhinay.