Next.js 13 App目录下监听路由变化的实现问题

问题根源 #

你的usePathname方案未生效，大概率是以下原因：

• 组件未标记为客户端组件：App Router默认是服务器组件，usePathname、useNavigation等路由Hook仅能在客户端组件中使用。
• methodToCall未稳定化：如果函数定义在组件内部，每次渲染都会生成新的引用，可能导致依赖数组异常，或掩盖实际触发逻辑。

正确解决方案 #

1. 标记组件为客户端组件 #

在组件顶部添加'use client'指令，确保路由Hook能正常工作：

'use client'

import { usePathname, useNavigation } from 'next/navigation'
import { useEffect, useRef, useCallback } from 'react'

2. 结合useNavigation监听路由完成状态 #

用useNavigation获取导航状态，配合usePathname判断路由变化，确保在路由切换完成后触发菜单关闭动画：

export default function NavMenu() {
  const pathname = usePathname()
  const navigation = useNavigation()
  const prevPathname = useRef(pathname)

  // 稳定化关闭动画函数，避免重复创建
  const closeMenu = useCallback(() => {
    // 这里写你的framer-motion关闭逻辑，比如设置isOpen为false
    console.log('路由切换完成，触发菜单关闭动画')
  }, [])

  useEffect(() => {
    // 仅当路由发生变化，且导航状态变为idle（完成）时执行
    if (prevPathname.current !== pathname && navigation.state === 'idle') {
      closeMenu()
      prevPathname.current = pathname
    }
  }, [pathname, navigation.state, closeMenu])

  // ... 菜单渲染逻辑
  return <div>你的导航菜单</div>
}

3. 备选方案：直接监听导航状态变化 #

如果只需要在导航结束时执行逻辑，也可以直接监听navigation.state的变化：

useEffect(() => {
  if (navigation.state === 'idle') {
    // 导航完成，可触发关闭逻辑
    closeMenu()
  }
}, [navigation.state, closeMenu])

为什么之前的方案失效？ #

• 未加'use client'：服务器组件中无法使用客户端路由Hook，usePathname不会更新，导致useEffect不触发。
• 函数未稳定化：如果methodToCall未用useCallback包裹，每次渲染都会生成新函数，依赖数组频繁变化可能导致逻辑混乱，或你误判了触发时机。

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