Next.js 14迁移至App Router后router.events类型错误解决方案咨询

在App Router中，next/navigation提供的useRouter不再包含events属性，这是Pages Router与App Router的API差异导致的。要实现路由变化时触发Meta Pixel的pageview，可采用以下方案：

方案：监听路径变化（推荐） #

利用usePathname钩子监听路由路径的变化，当路径更新时自动触发pageview，这是App Router推荐的声明式写法：

"use client"
import { usePathname, useEffect } from "next/navigation"
import * as fbq from "@/lib/fbmeta/metaPixel"

const Providers = ({ children }) => {
  const pathname = usePathname()

  // 初始加载触发一次pageview
  useEffect(() => {
    fbq.pageview()
  }, [])

  // 路由变化时触发pageview
  useEffect(() => {
    fbq.pageview()
  }, [pathname])

  return <>{children}</>
}

核心思路 #

App Router采用声明式的状态驱动设计，不再依赖传统的事件监听模式。通过监听pathname（路由路径）的状态变化，就能响应客户端路由导航行为，这种方式更契合React的状态管理理念，也能避免事件订阅/取消订阅的繁琐操作。如果需要监听查询参数变化，还可以结合useSearchParams钩子扩展逻辑。

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