المسارات المتداخلة ومعلمات المسار
تعلّم كيف يعرض المسار الأب الواجهات الفرعية، وكيف تمرّر معلمات المسار (مثل /products/42) المعرّفات إلى المكونات.
المسارات المتداخلة ومعلمات المسار درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا نستخدم المسارات المتداخلة والمعلمات؟
الهدف: افهم المسارات المتداخلة، وهي صفحات أب تعرض عروضًا فرعية، ومعلمات المسار، وهي أجزاء متغيرة من عنوان URL مثل /products/42.
فكرة المسار الأب وoutlet
يعرض المسار الأب، مثل /products، التخطيط وoutlet. وتملأ المسارات الفرعية، مثل /products/:id، هذه المنطقة بالمحتوى المحدد.
ما المقصود بالمعلمات؟
تلتقط معلمات المسار القيم من عنوان URL، مثل :id. وتقرأ المكونات المعلمة لجلب السجل المطابق أو عرضه.
عرض توضيحي: المسارات المتداخلة والمعلمات
عرض توضيحي يعتمد على hash: يعرض المسار الأب /products قائمة؛ ويؤدي اختيار عنصر إلى الانتقال إلى /products/ID وتصييّر العرض الفرعي بداخله.
<div id="root"></div>
قراءة المعلمات وإنشاء الروابط
قراءة المعلمات: حلّل عنوان URL، أو استخدم خطاف جهاز التوجيه، للحصول على id وتحميل البيانات. إنشاء الروابط: أنشئ مسارات مثل /products/ID انطلاقًا من القوائم.
نصائح ومزالق
نصائح:
- اجعل تخطيط المسار الأب صغيرًا؛ وصيّر محتوى المسار الفرعي في منطقة outlet.
- تحقق من المعلمات قبل استخدامها.
- تعامل مع المعرّفات غير الموجودة بسلاسة.
الغرض من معلمة المسار
مراجعة
مراجعة: توفّر المسارات الأب التخطيط؛ وتصيّر المسارات الفرعية محتواها داخل outlet. استخدم معلمات المسار لالتقاط المعرّفات من عنوان URL وعرض السجل الصحيح.
الأسئلة الشائعة
هل درس «المسارات المتداخلة ومعلمات المسار» مجاني؟
نعم — نص درس «المسارات المتداخلة ومعلمات المسار» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «المسارات المتداخلة ومعلمات المسار»؟
تعلّم كيف يعرض المسار الأب الواجهات الفرعية، وكيف تمرّر معلمات المسار (مثل /products/42) المعرّفات إلى المكونات. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «المسارات المتداخلة ومعلمات المسار»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مفاهيم التوجيه من جانب العميل
- المسارات المتداخلة ومعلمات المسار
- روابط التنقل والحالات النشطة