تعريف خريطة المسارات بـ Routes | مفهوم التوجيه في تطبيقات الصفحة الواحدة وإعداد React Router

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

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

داخل مزود التوجيه، نُعرّف حاوية <Routes> وبداخلها عناصر <Route> لربط كل عنوان بشاشته. يقبل كل مسار خاصيتين أساسيتين: خاصية path لكتابة نص المسار مثل "/courses"، وخاصية element لتمرير عنصر JSX جاهز مثل <CoursesPage />.

يتيح تمرير العنصر بصياغة JSX المباشرة داخل element تزويد مكون الصفحة بأي خصائص props اعتيادية بنفس سلاسة بقية مكونات React.

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

HTML

<MemoryRouter initialEntries={[activePath]}>
  <Routes>
    <Route path="/" element={<HomePage />} />
    <Route path="/courses" element={<CoursesPage />} />
    <Route path="/about" element={<AboutPage />} />
  </Routes>
</MemoryRouter>

جرّب بنفسك

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

Defining Routes and Route Tree تعريف خريطة المسارات بـ Routes

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

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