في هذا الدرس 6تصفّح المواضيع
لا تُكتب مئات عناصر <Route> يدوياً لعرض مئات الدورات أو المنتجات؛ بل تتيح React Router تعريف مقاطع مسار ديناميكية تبدأ بنقطتين رأسيتين (:) مثل path="/courses/:slug" أو path="/orders/:orderId".
بهذا الأسلوب يتولى مكون تفاصيل واحد عرض جميع السجلات تلقائياً، كما يمكن دمج أكثر من معامل متغير في مسار واحد مثل /orgs/:orgId/repos/:repoName.
داخل مكون الصفحة الفرعية، نستدعي خطاف useParams() لاستخراج القيم المتغيرة بنفس الأسماء المعرّفة في المسار مثل const { slug } = useParams(). وعند انتقال المستخدم برابط <Link> إلى عنصر آخر، يعيد الخطاف القيمة المحدثة ويعيد رسم الواجهة فوراً.
function CourseDetail() {
const { slug } = useParams();
const item = TRACKS.find((t) => t.slug === slug);
return (
<article>
<h2>{item.title}</h2>
<p>{item.lessons} Interactive Lessons</p>
</article>
);
}بما أن أي زائر يستطيع كتابة عنوان يدوي مثل /courses/unknown-item في المتصفح، فإن نجاح مطابقة النمط /courses/:slug لا يعني بالضرورة وجود هذا السجل في البيانات أو الخادم. تحقّق دائماً من وجود العنصر قبل قراءة خصائصه لتجنب انهيار المكون، واعرض بطاقة تنبيه ودية تضم رابط عودة آمناً عبر <Link>.
function OrderDetails() {
const { orderId } = useParams();
const order = ORDERS[orderId];
if (!order) {
return <p>Order #{orderId} was not found.</p>;
}
return <h3>Order Status: {order.status}</h3>;
}بينما تحدد مقاطع المسار هوية المورد المعروض، تضبط معاملات الاستعلام (Query Strings مثل ?level=beginner&q=hooks) طريقة التصفية والفرز والترقيم. يوفر خطاف useSearchParams() زوجاً يشبه useState لكنه متزامن مباشرة مع شريط العنوان.
نقرأ القيم عبر searchParams.get("level") التي تعيد null عند غياب المعامل، ونحدّث العنوان بسلاسة باستدعاء setSearchParams({ level: "advanced" }).
function FilterableLessons() {
const [params, setParams] = useSearchParams();
const level = params.get('level') || 'all';
return (
<button onClick={() => setParams({ level: 'pro' })}>
Active Filter: {level}
</button>
);
}يمنحك حفظ فلاتر التصنيف والترتيب ورقم الصفحة في معاملات الرابط بدلاً من حصرها في useState المحلي ثلاث مزايا جوهرية لتجربة المستخدم: إمكانية نسخ الرابط ومشاركته مع الزملاء لعرض نفس النتائج تماماً، وبقاء الفلاتر محفوظة عند تحديث المتصفح، وعمل زري الرجوع والتقدم بسلاسة بين خطوات البحث.
أخيراً، يعيد خطاف useLocation() كائن الموقع الحالي كاملاً متضمناً المسار pathname، ونص الاستعلام search، والمرساة hash، والمفتاح الفريد key. يُوظف هذا الخطاف لبناء شريط فتات الخبز الديناميكي أو التمرير لأعلى الصفحة عند تغير المسار. يلخص الجدول التالي متى تستخدم كل أداة:
| الخطاف أو الآلية | البيانات المقروءة أو المدارة | حالة الاستخدام الهندسية المثلى |
|---|---|---|
useParams() | مقاطع المسار المتغيرة مثل :slug | جلب وعرض صفحة تفاصيل دورة أو طلب محدد |
useSearchParams() | معاملات الاستعلام الواقعة بعد علامة ? | فلاتر التصنيف والترتيب وأرقام الصفحات القابلة للمشاركة |
useLocation() | كائن pathname وsearch وhash | مزامنة فتات الخبز والتمرير لأعلى الصفحة وتتبع الزيارات |
خطاف useState() المحلي | حالة مؤقتة خاصة بذاكرة المكون فقط | فتح النوافذ المنبثقة ومسودات الحقول قبل الإرسال |
function LocationReadout() {
const { pathname, search, hash } = useLocation();
return (
<div className="meta">
<p>Path: {pathname} | {search || 'none'}</p>
<p>Anchor Hash: {hash || 'none'}</p>
</div>
);
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس تعريف المقاطع الديناميكية في المسارات وقراءتها بخطاف useParams، وتأمين الواجهة عند غياب العنصر المطلوب، ومزامنة فلاتر البحث القابلة للمشاركة عبر useSearchParams وفحص بيانات العنوان الكاملة بخطاف useLocation. الخطوة التالية: انتقل الآن إلى الدرس رقم 50 «المسارات المتداخلة والتخطيطات المشتركة عبر Outlet» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Dynamic Segment مقطع المسار الديناميكي
- جزء متغير يبدأ بنقطتين في تعريف المسار مثل :slug لالتقاط المعرّفات المختلفة بمكون واحد.
- للمراجعة
- 02 useParams خطاف معاملات المسار
- خطاف يعيد كائناً يضم القيم النصية المستخرجة من المقاطع الديناميكية في العنوان المفتوح.
- للمراجعة
- 03 useSearchParams خطاف معاملات البحث
- خطاف يقرأ ويحدّث معاملات الاستعلام بعد علامة الاستفهام لمزامنة الفلاتر مع شريط العنوان.
- للمراجعة
- 04 useLocation خطاف بيانات الموقع
- خطاف يزود المكون بكائن العنوان الكامل متضمناً المسار والاستعلام والمرساة وحالة الانتقال.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 URI URI
- Uniform Resource Identifier
- صيغة قياسية لتعريف الموارد عبر مقاطع المسار ومعاملات الاستعلام الاختيارية.
- للمراجعة
- 02 ID ID
- Identifier
- مفتاح فريد يُمرر في المسار الديناميكي للوصول إلى سجل بعينه داخل البيانات.
- للمراجعة
- 03 UX UX
- User Experience
- سلاسة تجربة المستخدم عند تصفية البيانات وتحديث الصفحة ومشاركة نفس النتائج عبر الرابط.
- للمراجعة
- 04 API API
- Application Programming Interface
- واجهات البرمجة القياسية مثل كائن URLSearchParams الذي يعتمد عليه خطاف البحث.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال تفاصيل الدورات في محرر التجريب وأضف كائناً رابعاً لمصفوفة TRACKS ثم اختبر فتح رابطه الديناميكي.
-
في مثال تصفية الدروس، أضف زر مسح يعيد استدعاء setSearchParams بكائن فارغ وراقب عودة شريط العنوان إلى /lessons.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
كيف تعرّف مقطعاً ديناميكياً باسم courseId داخل خاصية path لعنصر <Route>؟
تُكتب المقاطع الديناميكية مسبوقة بنقطتين رأسيتين مثل /courses/:courseId.
ما نوع البيانات البرمجي لجميع القيم المستخرجة عبر خطاف useParams()؟
تُعاد قيم المقاطع الملتقطة من الرابط دائماً كنصوص String في JavaScript.
إذا طابق المسار /orders/:orderId العنوان /orders/999، تضمن React Router تلقائياً وجود الطلب رقم 999 في قاعدة البيانات.
خطأ؛ تطابق المكتبة شكل النص في الرابط فقط، ويجب على المكون التحقق من وجود السجل الفعلي وعرض بديل آمن عند غيابه.
كيف تقرأ قيمة المعامل level من العنصر الأول الذي يعيده خطاف useSearchParams()؟
يمثل العنصر الأول كائن URLSearchParams قياسياً، لذا نقرأ القيمة بالدالة searchParams.get("level").
ماذا تعيد الدالة searchParams.get("sort") إذا لم يكن المعامل sort موجوداً في شريط العنوان؟
تعيد دالة get في كائن URLSearchParams القيمة null عند غياب المفتاح المطلوب.
ما الميزة الأساسية لحفظ فلاتر البحث في معاملات شريط العنوان بدلاً من الاكتفاء بـ useState المحلي؟
حفظ الفلاتر في العنوان يمكّن المستخدم من مشاركة نفس النتائج بالرابط والاحتفاظ بها عند تحديث الصفحة.
يُحظر تماماً وضع رموز الجلسات السرية أو كلمات المرور داخل معاملات الاستعلام في شريط العنوان.
صواب؛ لأن العناوين تُسجّل في سجل المتصفح وسجلات الخوادم ويسهل كشفها.
ما خطاف React Router الذي يجمع خصائص pathname وsearch وhash في كائن موقع واحد؟
يعيد خطاف useLocation() كائن الموقع الكامل للعنوان الحالي.
ما الخيار الذي نمرره لدالة setSearchParams أثناء البحث النصي الحي لمنع تكديس خطوات مكررة في زر الرجوع؟
يستبدل الخيار { replace: true } مدخل السجل الحالي بدلاً من إضافة خطوة جديدة مع كل حرف يكتبه المستخدم.
يمكن أن يضم مسار <Route> الواحد أكثر من معامل ديناميكي مثل /teams/:teamId/projects/:projectId.
صواب؛ ويعيد خطاف useParams() كلا المعاملين معاً داخل كائن النتيجة.