التوجيه الديناميكي
تعلم التوجيه الديناميكي في React باستخدام معلمات التوجيه والوصول إليها بكفاءة.
سنغطي ما يلي...
في العديد من التطبيقات العملية، غالبًا ما تحتوي عناوين URL على بيانات ديناميكية. على سبيل المثال، قد يبدو عنوان URL لصفحة منتج في متجر إلكتروني بالشكل /products/123 ، حيث 123 هو مُعرّف المنتج الذي يتغير لكل منتج متوفر في المتجر.
في تطبيقات React ، تُعالج هذه السيناريوهات عبر التوجيه الديناميكي، وذلك بتحديد مسارات بمعلمات. يُمكّننا التوجيه الديناميكي من تحديد مسارات بمعلمات بديلة، مما يسمح لعناوين URL بتضمين قيم ديناميكية. يدعم React Router التوجيه الديناميكي باستخدام علامة النقطتين ( : ) في مسار المسار لتمثيل معلمة. على سبيل المثال:
<Route path="/products/:id" element={<ProductDetail />} />
:id هي معلمة ديناميكية يمكنها الاحتفاظ بأي قيمة، مثل 123 أو abc .
إضافة روابط مع معرفات المنتج
قبل استخراج المعلمات من عنوان URL، دعنا نقوم بإنشاء صفحة منتج تتضمن روابط تحتوي على معرفات منتجات ديناميكية في عنوان URL.
فهم بنية عنوان URL
قم بإلقاء نظرة فاحصة على عناوين URL التي تم إنشاؤها بواسطة الروابط ( الأسطر 7-9 ):
/products/1...