登录成功后router.push跳转/dashboard页面未渲染组件，刷新才显示求助

可能的原因及修复方案 #

1. Cookie写入未完成就跳转 #

你在useEffect里设置Cookie后立刻执行路由跳转，但Cookie写入是异步操作，可能跳转后Dashboard页面的鉴权逻辑（如果存在）还读不到新token，导致组件被拦截不渲染。

修复方式：
如果你的setCookies支持回调，把跳转放到写入完成的回调里；不支持的话就加个短延迟确保Cookie写入：

useEffect(() => {
  if (!verifyOTPRes?.accessToken) return;

  setCookies(
    "token",
    verifyOTPRes.accessToken,
    { maxAge: 60 * 60 * 24 * 7 },
    () => {
      // 写入完成后再跳转
      router.replace('/dashboard');
    }
  );
}, [verifyOTPRes]);

或者用延迟：

useEffect(() => {
  if (!verifyOTPRes?.accessToken) return;

  setCookies(
    "token",
    verifyOTPRes.accessToken,
    { maxAge: 60 * 60 * 24 * 7 }
  );
  
  // 短延迟确保Cookie写入完成
  setTimeout(() => {
    router.replace('/dashboard');
  }, 100);
}, [verifyOTPRes]);

2. Mutation状态判断不严谨 #

verifyOTPRes可能在mutation过程中触发多次更新（比如从undefined到初始数据），如果没判断token是否有效就跳转，可能导致逻辑提前执行。

修复方式：
增加对accessToken的存在性判断，确保拿到有效token再执行后续操作：

useEffect(() => {
  // 必须拿到有效token才继续
  if (!verifyOTPRes?.accessToken) return;

  setCookies(
    "token",
    verifyOTPRes.accessToken,
    { maxAge: 60 * 60 * 24 * 7 }
  );
  
  router.replace('/dashboard');
}, [verifyOTPRes]);

3. 路由配置或组件注册错误 #

检查你的路由配置，确认/dashboard对应的组件确实是Courses，比如在Next.js中：

• App Router模式下，确保app/dashboard/page.js正确导出Courses组件
• Pages Router模式下，确保pages/dashboard.js正确导出组件

示例正确导出：

// app/dashboard/page.js
const Courses = () => {
  return <h1>My Dashboard</h1>;
};

export default Courses;

4. 鉴权逻辑依赖旧缓存 #

如果Dashboard页面有鉴权逻辑，可能跳转时读取了旧的Cookie缓存，误以为用户未登录，导致不渲染组件。

修复方式：
在Dashboard组件挂载时重新读取Cookie，确保拿到最新状态：

import { useEffect, useState } from 'react';
import Cookies from 'js-cookie';

const Courses = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    // 组件挂载时重新读取Cookie
    const token = Cookies.get('token');
    setIsLoggedIn(!!token);
  }, []);

  if (!isLoggedIn) {
    return null; // 或跳转回登录页
  }

  return <h1>My Dashboard</h1>;
};

export default Courses;

内容的提问来源于stack exchange，提问作者alfheimrShiven