useParams useParams يقرأ المعاملات

آخر تحديث: 2026-11-03

useParams useParams يقرأ المعاملات

يُعيد useParams كائنًا بقطع المسار الديناميكية للمسار المطابق حاليًا: حين يُكتب المسار /users/:id، يمنحك زيارة /users/42 الكائن { id: '42' }. تعتمد عليه صفحات التفاصيل والتعديل لمعرفة أي سجلّ تعرض، فوحدها URL تقود المحتوى. تذكّر أن المعامل دائمًا سلسلة نصية، فقارنه بـ Number(id) قبل أي فحص رقمي.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

import { useParams } from 'react-router-dom'

// Route: <Route path="/users/:id" element={<UserDetail />} />
function UserDetail() {
  const { id } = useParams()        // { id: '42' }, note that it is a string
  const user = users.find(u => u.id === id)
  return <h1>User {user?.name}</h1>
}

القيمة المرجعة：كائن مفاتيحه أسماء المعاملات المُعلَنة بـ : في المسار وقيمه قطع URL الفعلية (سلاسل نصية، مثل { id: '42' }).

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

النقر على «زيارة /users/2» يغيّر المعامل إلى 2 وتعرض الصفحة بوب — نفس أثر useParams في قراءة قطعة ديناميكية من URL (عرض توضيحي محاكى).

💡 النقاط الأساسية

🏷️ المزيد من التوجيه والحالة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن