Next.js 13 App Router中useRouter的push方法无效果问题

针对你遇到的Modal关闭时router.push不生效但控制台能打印日志的问题，可按以下步骤排查解决：

• 确认路由文件存在
  检查App Router目录下是否存在app/number/page.js（或jsx/tsx）文件，Next.js严格遵循文件系统路由约定，路径或文件名不符合规范会导致导航静默失败。

• 排查事件阻止行为
  检查Modal组件内部的关闭逻辑，是否有点击事件调用了event.preventDefault()或event.stopPropagation()，导致父组件onClose中的导航代码未正常执行。可以在Modal关闭按钮的事件处理中确保允许事件冒泡，或直接在父组件onClose中强制执行导航逻辑。

• 添加错误捕获
  给router.push添加错误捕获，查看是否有隐藏报错信息：

  onClose={() => {
    console.log("Hello");
    try {
      router.push("/number");
    } catch (err) {
      console.error("导航失败原因:", err);
    }
  }}
  

• 延迟执行导航
  若Modal关闭时存在DOM动画或同步操作阻塞，可尝试用setTimeout延迟执行导航：

  onClose={() => {
    console.log("Hello");
    setTimeout(() => {
      router.push("/number");
    }, 0);
  }}
  

• 确认Next.js版本
  确保使用的是Next.js 13.4及以上版本，App Router在13.4版本才正式稳定，低版本可能存在路由相关的已知bug。

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