تغليف الجذر بمزود BrowserRouter | مفهوم التوجيه في تطبيقات الصفحة الواحدة وإعداد React Router

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

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

يجب تغليف شجرة التطبيق بمزود توجيه واحد فقط قرب نقطة الجذر في main.jsx أو App.jsx، وتوفر المكتبة ثلاثة مزودات رئيسية بحسب بيئة التشغيل:

<BrowserRouter>: الخيار القياسي للمواقع الحديثة؛ يعتمد مسارات نظيفة مثل /courses مع ضبط خادم الاستضافة لإرجاع index.html عند التحديث المباشر.
<MemoryRouter>: يحفظ سجل التنقل في مصفوفة داخل الذاكرة عبر خاصية initialEntries، وهو الخيار الأمثل للاختبارات البرمجية والمحاكيات المعزولة.
<HashRouter>: يضع المسار بعد علامة # كحل احتياطي فقط عند الاستضافة على خادم ملفات ثابت لا يدعم توجيه العناوين.

الصف 2 صورة توضيحية

مخطط يقارن بين إعادة التحميل الكاملة في المواقع التقليدية والتبديل الفوري للمكونات عبر BrowserRouter وRoutes

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

HTML

import {
  BrowserRouter, Routes, Route
} from 'react-router-dom';
function RootApp() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LandingPage />} />
      </Routes>
    </BrowserRouter>
  );
}

جرّب بنفسك

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

Wrapping App in BrowserRouter تغليف الجذر بمزود BrowserRouter

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

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