Next13客户端组件中如何获取动态路由参数（/home/[id]）？

在Next.js 13的App Router架构下，客户端组件无法再通过next/router的router.query获取动态路由参数，取而代之的是使用next/navigation提供的useParams钩子，具体实现步骤如下：

• 标记组件为客户端组件：在组件文件最顶部添加'use client'指令，这是使用客户端钩子的前提。
• 导入useParams钩子：从next/navigation模块中导入该钩子。
• 获取并使用动态参数：调用useParams()会返回一个包含所有动态路由段参数的对象，直接通过属性名即可访问对应参数。

示例代码：

'use client'

import { useParams } from 'next/navigation'

export default function HomeDetail() {
  const params = useParams()
  // 对应路由 /home/123 时，params.id 的值为 '123'
  const id = Number(params.id) // 按需转换为数字类型

  return <div>当前动态路由ID：{id}</div>
}

补充说明：

• useParams返回的所有参数值均为字符串类型，若需要其他类型需自行转换。
• 对于嵌套动态路由（如/home/[id]/[category]），可通过params.id、params.category分别获取对应参数。
• 服务端组件仍保持通过组件props的params属性获取动态参数的方式，不受此影响。

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