Skip to content

NextJS中文文档 - Use Params

useParams 是一个客户端组件钩子,让你可以读取由当前 URL 填充的路由动态参数

tsx
'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams<{ tag: string; item: string }>()

  // 路由 -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)

  return '...'
}
jsx
'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams()

  // 路由 -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)

  return '...'
}

参数

tsx
const params = useParams()

useParams 不接受任何参数。

返回值

useParams 返回一个包含当前路由填充的动态参数的对象。

  • 对象中的每个属性都是一个活动的动态段。
  • 属性名是段的名称,属性值是段被填充的内容。
  • 属性值将是一个 stringstring 数组,取决于动态段的类型
  • 如果路由不包含动态参数,useParams 返回一个空对象。
  • 如果在 Pages Router 中使用,useParams 在初始渲染时将返回 null,并在路由器准备好后更新为遵循上述规则的属性。

例如:

路由URLuseParams()
app/shop/page.js/shop{}
app/shop/[slug]/page.js/shop/1{ slug: '1' }
app/shop/[tag]/[item]/page.js/shop/1/2{ tag: '1', item: '2' }
app/shop/[...slug]/page.js/shop/1/2{ slug: ['1', '2'] }

版本历史

版本变更
v13.3.0引入 useParams

🎉有任何问题,欢迎联系我

WeChat QR Code
WeChat
QQ QR Code
QQ

赣ICP备2023003243号