Next.js Router路由push后如何获取当前页面路径？

问题核心在于router.push是异步操作，调用后不会立刻更新路由状态，所以紧接着打印router.pathname拿到的还是跳转前的路径。下面提供几种可行的解决方法：

方法一：利用router.push的回调函数 #

router.push返回一个Promise，也支持传入回调参数，我们可以在跳转完成后再获取目标路径：

方式1：Promise.then() #

const handleClick = (e, path) => {
  e.preventDefault()
  props.toggleMenu()
  router.push(path)
    .then(() => {
      console.log(router.pathname) // 此处打印目标路径
    })
}

方式2：传入回调参数 #

const handleClick = (e, path) => {
  e.preventDefault()
  props.toggleMenu()
  router.push(path, undefined, { shallow: false }, () => {
    console.log(router.pathname) // 此处打印目标路径
  })
}

注：第二个参数为可选的as路径，第三个参数是路由配置项，可按需调整。

方法二：监听路由切换完成事件 #

通过Next.js Router的routeChangeComplete事件，在路由完全切换后执行逻辑，适合需要全局监听路由变化的场景：

import { useEffect } from 'react'
import Link from 'next/link'
import { useRouter } from "next/router"

const SideBar = (props) => {
  const router = useRouter()

  useEffect(() => {
    // 定义路由切换完成后的处理函数
    const onRouteChange = (url) => {
      console.log('当前路径:', url) // 直接拿到目标URL
      // 也可以通过router.pathname获取
      console.log('当前pathname:', router.pathname)
    }

    // 添加事件监听
    router.events.on('routeChangeComplete', onRouteChange)

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      router.events.off('routeChangeComplete', onRouteChange)
    }
  }, [router])

  const handleClick = (e, path) => {
    e.preventDefault()
    props.toggleMenu()
    router.push(path)
  }

  return (
    <div className="sidebar">
       <Link href="/">
         <a onClick={(e)=> handleClick(e, "/")} >HOME</a>
       </Link>
       <Link href="/service">
         <a onClick={(e)=> handleClick(e, "/service")} >SERVICE</a>
       </Link>
    </div>
 )
}
export default SideBar

额外优化：简化Link的使用 #

其实Next.js的Link组件本身已经封装了跳转逻辑，不需要手动调用router.push和阻止默认行为。如果你的需求只是跳转前执行toggleMenu，可以简化代码：

const SideBar = (props) => {
  return (
    <div className="sidebar">
       <Link href="/">
         <a onClick={() => props.toggleMenu()}>HOME</a>
       </Link>
       <Link href="/service">
         <a onClick={() => props.toggleMenu()}>SERVICE</a>
       </Link>
    </div>
 )
}

这样既保留了Link的预加载等原生特性，又能完成菜单折叠的需求，后续要获取跳转后的路径，依然可以用上面的回调或事件监听方法。

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