تعدد الصفحات مقابل توجيه SPA | مفهوم التوجيه في تطبيقات الصفحة الواحدة وإعداد React Router

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في المواقع التقليدية متعددة الصفحات (MPA)، يؤدي الانتقال إلى قسم جديد إلى هدم المستند الحالي بالكامل، وطلب ملف HTML جديد من الخادم، وإعادة تشغيل ملفات JavaScript من الصفر؛ مما يمسح أي حالة نشطة في ذاكرة التطبيق فوراً.

يعالج التوجيه من طرف العميل (Client-Side Routing) هذه المشكلة في تطبيقات الصفحة الواحدة (SPA) عبر توظيف واجهة سجل المتصفح history.pushState() لتحديث شريط العنوان ومطابقة المكون المقابل لحظياً مع بقاء جذر React وحالاته المشتركة حية دون انقطاع.

الصف 2 كود برمجي

HTML

function App({ entry }) {
  return (
    <MemoryRouter key={entry} initialEntries={[entry]}>
      <Routes>
        <Route path="/" element={<HomeView />} />
        <Route path="/courses" element={<Courses />} />
      </Routes>
    </MemoryRouter>
  );
}

جرّب بنفسك

الصف 3 ملاحظة هامة

MPA Reloads vs SPA Navigation تعدد الصفحات مقابل توجيه SPA

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (مفهوم التوجيه في تطبيقات الصفحة الواحدة وإعداد React Router)