Next.js动态修改Query Params后无法获取正确值问题

核心问题1：router.replace调用方式错误 #

你当前用router.asPath作为第一个参数，但asPath包含旧的查询参数，会导致新query无法正确覆盖。而且router.replace的第二个参数是用于显示URL的可选as参数，正确修改query的方式应该直接传递包含pathname和query的对象。

核心问题2：router.query的异步更新与引用不变性 #

Next.js的router.query是异步更新的，且它是引用不变的对象——即使内部属性变化，对象本身的引用不会改变，所以你之前的useEffect依赖query.status不会触发更新（React的依赖对比是浅对比）。

修正后的完整代码 #

import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/router'

const TestURL = () => {
  const router = useRouter()
  const [status, setStatus] = useState(router.query.status as string)

  // 监听路由变化，同步更新status
  useEffect(() => {
    const handleRouteChange = () => {
      setStatus(router.query.status as string)
    }

    // 路由变化完成后更新
    router.events.on('routeChangeComplete', handleRouteChange)
    // 初始化时如果router已就绪，直接更新
    if (router.isReady) {
      setStatus(router.query.status as string)
    }

    // 清理事件监听
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router])

  function handleChangeQueryParams(newStatus: string) {
    // 正确的replace方式：传递pathname和新的query
    router.replace({
      pathname: router.pathname,
      query: { status: newStatus }
    })
  }

  return (
    <div className="flex flex-col gap-4">
      Index
      <button>{status}</button>
      <button
        onClick={() => handleChangeQueryParams('Test1')}
        className="border"
      >
        切换为Test1
      </button>
      <button
        onClick={() => handleChangeQueryParams('Test2')}
        className="border"
      >
        切换为Test2
      </button>
    </div>
  )
}

export default TestURL

关键修改点说明 #

• 修正router.replace调用：直接传递pathname和新的query对象，确保URL和内部router.query正确更新。
• 使用路由事件监听：通过routeChangeComplete事件监听路由变化完成，此时router.query已更新，再同步到本地state。
• 处理初始化就绪状态：判断router.isReady，避免在router未初始化时获取空query。
• 清理事件监听：组件卸载时移除事件监听，防止内存泄漏。

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