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
عند التصيير الأولي ويتم تحديثه بالخصائص وفقًا للقواعد المذكورة أعلاه بمجرد أن يكون الموجه جاهزًا.
على سبيل المثال:
الطريق | URL | useParams() |
---|---|---|
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 . |