Next.js获取URL参数问题：params为空原因及解决办法

问题原因 #

• route.params的作用是获取动态路由参数（比如路径/page/[id]中的id），而非URL尾部的查询参数（?id=1这种格式），所以用它来拿?id=1的参数自然为空。
• Next.js的Pages Router和App Router对路由的API设计不同，若用错对应Router的API，也会导致拿不到参数。

解决方法 #

1. 若使用Pages Router（Next.js 12及更早，或13+仍使用pages目录） #

直接使用useRouter返回的query对象：

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  const id = router.query.id

  return <div>当前ID：{id}</div>
}

2. 若使用App Router（Next.js 13+的app目录） #

有两种方式可选：

客户端组件中使用useSearchParams

需加上'use client'指令，因为这是客户端专属钩子：

'use client'
import { useSearchParams } from 'next/navigation'

export default function Page() {
  const searchParams = useSearchParams()
  const id = searchParams.get('id')

  return <div>当前ID：{id}</div>
}

服务器组件中直接接收searchParams props

服务器组件无需额外钩子，直接将searchParams作为组件参数接收：

export default function Page({ searchParams }) {
  const id = searchParams.id

  return <div>当前ID：{id}</div>
}

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