شرح صفوف ومحتوى الفقرة
للحفاظ على نظافة معمارية مشروع Vite مع توسع الشاشات، افصل مكونات الصفحات الكاملة عن الوحدات القابلة لإعادة الاستخدام في مجلدين واضحين داخل src/: ضع شاشات المسارات مثل HomePage.jsx وCoursesPage.jsx داخل مجلد src/pages/، وأبقِ العناصر التشاركية كالأزرار والبطاقات داخل src/components/. يوضح الجدول التالي الفروق الهندسية الأساسية:
| أداة التوجيه | آلية حفظ العنوان والسجل | الاستخدام الهندسي الموصى به |
|---|---|---|
<BrowserRouter> | مسارات نظيفة عبر واجهة History API القياسية | جميع تطبيقات الويب الحديثة في بيئة الإنتاج |
<MemoryRouter> | مصفوفة داخلية مستقلة في ذاكرة JavaScript | اختبارات المكونات الآلية وبيئات المحاكاة المعزولة |
<HashRouter> | الجزء الواقع بعد رمز المرساة # في الرابط | الاستضافات الثابتة القديمة التي لا تدعم توجيه الخادم |
مجلد src/pages/ | تُربط مكوناته مباشرة داخل عناصر <Route> | شاشات الصفحات الكاملة التي تجمع المكونات المشتركة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
قارنت في هذا الدرس بين إعادة التحميل التقليدية وتوجيه تطبيقات الصفحة الواحدة، وتعرفت على تثبيت مكتبة React Router واختيار المزود المناسب وبناء شجرة Routes وRoute وآلية المطابقة الذكية وتنظيم مجلد الصفحات. الخطوة التالية: انتقل الآن إلى الدرس رقم 48 «التنقل التصريحي وتمييز الرابط النشط عبر Link وNavLink» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.