如何在Next.js的next/navigation路由中传递查询参数？

在Next.js 13+的App Router体系下，直接在router.push的字符串路径里拼接查询参数确实会出现参数丢失的问题，正确的做法是用对象格式来指定路径和查询参数：

import { useRouter } from 'next/navigation'
const router = useRouter()

// 正确写法
router.push({
  pathname: '/foo',
  query: { bar: '10' }
})

这样调用后，URL会正常显示为/foo?bar=10，查询参数也能被目标页面正确读取。如果要在/foo页面获取这个参数，可以用useSearchParams钩子：

import { useSearchParams } from 'next/navigation'

export default function FooPage() {
  const searchParams = useSearchParams()
  const barValue = searchParams.get('bar') // 拿到值 '10'

  return <div>bar 参数的值：{barValue}</div>
}

之所以直接拼接字符串会失效，是因为App Router的push方法对字符串路径的解析逻辑不同于旧的Pages Router，官方更推荐用对象格式来传递包含查询参数的路由信息，这样能避免解析异常导致的参数丢失。

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