useParams

useParams هو هوك مكون العميل (Client Component) يسمح لك بقراءة المعاملات الديناميكية (dynamic params) للطريق المملوءة بواسطة عنوان URL الحالي.

'use client'

import { useParams } from 'next/navigation'

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

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

  return '...'
}
'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 '...'
}

المعاملات

const params = useParams()

لا يأخذ useParams أي معاملات.

القيم المُرجعة

يُرجع useParams كائنًا يحتوي على المعاملات الديناميكية (dynamic parameters) المملوءة للطريق الحالي.

  • كل خاصية في الكائن تمثل مقطعًا ديناميكيًا نشطًا.
  • اسم الخاصية هو اسم المقطع، وقيمة الخاصية هي ما تم ملء المقطع به.
  • ستكون قيمة الخاصية إما string أو مصفوفة من string اعتمادًا على نوع المقطع الديناميكي.
  • إذا كان الطريق لا يحتوي على معاملات ديناميكية، يُرجع 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.