Menu

useParams

useParams 是一个 客户端组件 hook，允许你读取当前 URL 填充的路由的 动态参数。

app/example-client-component.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 "...";
}
app/example-client-component.js
"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 "...";
}

参数

const params = useParams();

useParams 不接受任何参数。

返回值

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

  • 对象中的每个属性都是一个活动的动态段。
  • 属性的名称是段的名称，属性的值是段填充的内容。
  • 属性的值将根据 动态段的类型 是 string 或 string 数组。
  • 如果路由不包含动态参数，useParams 返回一个空对象。
  • 如果在页面路由器中使用，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.0useParams 引入。