跳到主要内容

useParams

useParams 是一个客户端组件的hook，可以让你读取由当前 URL 路由的query参数。

'use client'
 
import { useParams } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const params = useParams()
 
  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)
 
  return <></>
}

example​

RouterUrlParams
/shop/shop{}
/shop/[slug]/shop/1{ slug: '1' }
/shop/[tag]/[item]/shop/1/2{ tag: '1', item: '2' }
/shop/[...slug]/shop/1/2{ slug: ['1', '2'] }