Next.js中使用router.push跳转新页面失败问题求助

开发者阿泽

2026-7-19

解决Next.js中router.push无法触发页面跳转的问题

以下是具体排查点和修复方案：

1. 核对页面路径与文件结构

你提到要跳转到example.js，但代码里写的是router.push("/swap")，先确认：

如果是App Router（Next.js 13+）：是否在app目录下存在swap/page.js（或目标页面example/page.js）？路径需与文件结构对应，比如要跳example.js，路由参数应该是"/example"。
如果是Pages Router：是否在pages目录下有swap.js（或example.js）？

若路径写错，直接修正router.push的参数即可。

2. 验证按钮点击事件是否触发

在handleButtonClick中添加日志，确认函数是否执行：

const handleButtonClick = () => {
  console.log("按钮已点击");
  router.push("/swap");
};

打开浏览器控制台，点击按钮如果无日志输出，检查：

按钮是否被其他元素遮挡（可通过浏览器开发者工具查看元素层级）
按钮CSS是否设置了pointer-events: none，导致无法触发点击

3. 确认路由钩子的使用场景

你使用的next/navigation的useRouter是App Router专属API：

确保组件已正确标记为客户端组件（文件顶部的'use client'已添加，这部分没问题）
若项目是Pages Router（Next.js 12及更早版本），需改用next/router的useRouter：
```
// Pages Router 写法
import { useRouter } from "next/router";
```

4. 捕获导航错误

App Router的router.push是异步函数，可通过try/catch捕获错误，定位具体问题：

const handleButtonClick = async () => {
  try {
    await router.push("/swap");
    console.log("导航成功");
  } catch (err) {
    console.error("导航失败原因：", err);
  }
};