NextJS 13中router.push无法跳转至meet页面问题求助

核心原因：路由系统API导入方式变化 #

NextJS 13同时支持两种路由系统：传统的Pages Router（基于pages目录）和新的App Router（基于app目录），两者的路由API导入逻辑不同，你的代码用了Pages Router的导入方式，若项目是App Router架构就会导致跳转失效。

情况1：项目使用App Router（存在app目录） #

1. 替换路由导入语句：把原有的import router from 'next/router'替换为：

import { useRouter } from 'next/navigation';

2. 在组件内初始化路由实例：在SignIn组件内部添加：

const router = useRouter();

3. 声明客户端组件：因为useRouter是客户端专属钩子，需要在组件最顶部加上指令：

'use client';

修改后的组件头部示例：

'use client';
import { Input, Button } from '@nextui-org/react';
import { useRouter } from 'next/navigation';
import { SetStateAction, useEffect, useState } from 'react';

const SignIn = () => {
  const router = useRouter();
  // 其余原有代码保持不变...
};

情况2：项目使用Pages Router（存在pages目录） #

1. 验证页面路径正确性：确保/meet页面存在于pages/meet.tsx或pages/meet/index.tsx，路径拼写无错误。
2. 调试路由实例：在router.push前打印实例，确认未出现undefined：

console.log('router实例:', router);
router.push('/meet');

3. 尝试替换跳转方法：如果push无效，可尝试router.replace('/meet')（替换当前历史记录而非新增）。

额外排查点 #

• 确认API请求确实进入了response.ok分支：可在该分支添加日志，确保逻辑走到了跳转代码。
• 检查是否有全局路由拦截逻辑：比如权限中间件是否误阻止了登录后的跳转。

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