Next.js 14.2中router.push无页面重载时无法跳转问题排查

初始场景 #

使用Next.js 14.2 Pages目录结构，构建后执行npm start启动项目。首页登录按钮使用<Link prefetch={false}>跳转至登录页，输入正确信息后提示“登录成功”，但无法跳转到仪表盘页面。

跳转逻辑代码如下：

import { useRouter } from 'next/router';
const router = useRouter();

useEffect(() => {
   if (loggedin && localStorage?.getItem('token')) {
     console.log("isReady", router.isReady);
     router.push(ROUTE_NAMES.DASHBOARD);
   }
 }, [loggedin]);

控制台显示isReady为true，但router.push无效果。

补充排查 #

添加router.isReady状态判断后问题仍未解决，配置Middleware后跳转依旧失效，Middleware核心逻辑如下：

if (NO_AUTH_ROUTES.includes(pathname)) {
  return NextResponse.next();
} else if (isAuthenticate && AUTH_ROUTES.includes(pathname)) {
  // 已登录状态访问登录类路由，重定向到仪表盘
  return NextResponse.redirect(new URL(ROUTE_NAMES.DASHBOARD, request.url));
} else if (!AUTH_ROUTES.includes(pathname)) {
  // 访问非登录类路由时，未登录则重定向到登录页
  if (!isAuthenticate) {
    return NextResponse.redirect(new URL(ROUTE_NAMES.LOGIN, request.url));
  }
}
return NextResponse.next();

解决方案 #

结合Next.js社区相关讨论，可按以下步骤排查修复：

1. 修正Middleware路由匹配逻辑 #

• 确认AUTH_ROUTES是否包含登录页路径，NO_AUTH_ROUTES是否正确排除仪表盘等需权限的路由。
• 注意Middleware运行在服务端，无法直接读取浏览器的localStorage，若isAuthenticate依赖localStorage的token，会导致状态识别错误，进而触发重定向回登录页的逻辑，抵消前端router.push操作。

2. 优化前端跳转逻辑 #

• 确保loggedin状态更新同步可靠，避免因状态更新时机问题导致useEffect未触发或条件不满足。
• 为router.push添加错误捕获，排查跳转失败的具体原因：

useEffect(() => {
  const handleRedirect = async () => {
    if (loggedin && localStorage?.getItem('token')) {
      try {
        await router.push(ROUTE_NAMES.DASHBOARD);
      } catch (err) {
        console.error('跳转失败:', err);
      }
    }
  };
  handleRedirect();
}, [loggedin, router]);

3. 同步服务端与前端身份状态 #

• Middleware验证身份时，需通过请求头（如Cookie）获取token，而非localStorage。登录成功后，将token写入Cookie，确保服务端能正确识别已登录状态。
• 调整Middleware逻辑，避免循环重定向：已登录状态下访问仪表盘时，需确保路由规则不会触发不必要的重定向。

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