في هذا الدرس 6تصفّح المواضيع
لأن مكتبة React تركز معمارياً على رسم المكونات، يتولى التوجيه حزمة قياسية مستقلة هي React Router عبر الحزمة المخصصة للمتصفح react-router-dom. في أي مشروع مبني بأداة Vite، ثبّت الحزمة مباشرة بالأمر npm install react-router-dom.
فور إضافتها إلى ملف package.json، توفر الحزمة مزود السياق الجذري الذي يراقب العنوان الحالي إلى جانب مكونات المطابقة التصريحية التي تربط المسارات بالشاشات.
يجب تغليف شجرة التطبيق بمزود توجيه واحد فقط قرب نقطة الجذر في main.jsx أو App.jsx، وتوفر المكتبة ثلاثة مزودات رئيسية بحسب بيئة التشغيل:
<BrowserRouter>: الخيار القياسي للمواقع الحديثة؛ يعتمد مسارات نظيفة مثل/coursesمع ضبط خادم الاستضافة لإرجاعindex.htmlعند التحديث المباشر.<MemoryRouter>: يحفظ سجل التنقل في مصفوفة داخل الذاكرة عبر خاصيةinitialEntries، وهو الخيار الأمثل للاختبارات البرمجية والمحاكيات المعزولة.<HashRouter>: يضع المسار بعد علامة#كحل احتياطي فقط عند الاستضافة على خادم ملفات ثابت لا يدعم توجيه العناوين.
import {
BrowserRouter, Routes, Route
} from 'react-router-dom';
function RootApp() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<LandingPage />} />
</Routes>
</BrowserRouter>
);
}داخل مزود التوجيه، نُعرّف حاوية <Routes> وبداخلها عناصر <Route> لربط كل عنوان بشاشته. يقبل كل مسار خاصيتين أساسيتين: خاصية path لكتابة نص المسار مثل "/courses"، وخاصية element لتمرير عنصر JSX جاهز مثل <CoursesPage />.
يتيح تمرير العنصر بصياغة JSX المباشرة داخل element تزويد مكون الصفحة بأي خصائص props اعتيادية بنفس سلاسة بقية مكونات React.
<MemoryRouter initialEntries={[activePath]}>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/courses" element={<CoursesPage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</MemoryRouter>خلافاً للموجهات القديمة التي كانت تتوقف عند أول سطر يطابق بداية العنوان حسب الترتيب النصي، تعتمد React Router v6 خوارزمية تصنيف الأولوية والأخصية (Ranked Path Matching).
تحسب المكتبة نقاط دقة لكل مسار بناءً على عدد مقاطعه وثباتها؛ لذا يفوز المسار الثابت المحدد /courses/featured تلقائياً على المسار الأعم /courses بغض النظر عن ترتيب كتابة عناصر <Route> في الملف.
<Routes>
<Route path="/courses" element={<AllCourses />} />
<Route path="/courses/top" element={<Featured />} />
<Route path="/" element={<HomeView />} />
</Routes>للحفاظ على نظافة معمارية مشروع 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 الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Client-Side Routing التوجيه من طرف العميل
- متابعة تغير العنوان داخل المتصفح وتبديل مكون الصفحة المطابق في React لحظياً دون طلب ملف HTML جديد من الخادم.
- للمراجعة
- 02 BrowserRouter مزود مسارات المتصفح
- المزود القياسي في React Router الذي يزامن شجرة المكونات مع المسارات النظيفة بالاعتماد على واجهة سجل المتصفح.
- للمراجعة
- 03 MemoryRouter مزود المسارات بالذاكرة
- مزود توجيه يدير سجل العناوين داخل مصفوفة في الذاكرة عبر خاصية initialEntries للاختبارات والمحاكيات.
- للمراجعة
- 04 Ranked Path Matching مطابقة المسار الأخص
- خوارزمية تقييم النقاط في React Router التي تختار المسار الأدق مطابقة للعنوان تلقائياً بصرف النظر عن ترتيبه النصي.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 SPA SPA
- Single-Page Application
- تطبيق ويب يحمّل صفحة HTML أساسية واحدة ويبدل الشاشات ديناميكياً في المتصفح دون انقطاع.
- للمراجعة
- 02 MPA MPA
- Multi-Page Application
- معمارية المواقع التقليدية التي تطلب مستند HTML جديداً بالكامل من الخادم عند كل انتقال بين الصفحات.
- للمراجعة
- 03 URL URL
- Uniform Resource Locator
- العنوان الموحد في شريط المتصفح الذي تقارن React Router مساره لتحديد مكون الشاشة الواجب عرضه.
- للمراجعة
- 04 DOM DOM
- Document Object Model
- شجرة عناصر المستند الحية التي تحدّث React بداخلها منطقة الصفحة المتغيرة فقط بدلاً من هدم المستند كاملاً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال شجرة المسارات في محرر التجريب وأنشئ مكون PricingPage ثم اربطه بمسار /pricing وأضف زراً لاختبار عرضه.
-
في مثال أولوية المسارات، انقل مسار الجذر الرئيسي إلى أعلى القائمة وتأكد أن المسار الأخص /courses/featured يظل الفائز عند فتحه.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ماذا يحدث لحالة React المحفوظة في الذاكرة عند إعادة التحميل الكاملة في المواقع التقليدية؟
تؤدي إعادة تحميل الصفحة كاملة إلى هدم بيئة تشغيل JavaScript وتصفير جميع الحالات المحفوظة في الذاكرة.
ما واجهة المتصفح القياسية التي تتيح تحديث العنوان من طرف العميل دون إعادة تحميل الصفحة؟
يعتمد التوجيه الحديث في المتصفح على واجهة HTML5 History API لتغيير العنوان بسلاسة.
ما الحزمة القياسية التي نثبتها عبر npm لإضافة التوجيه لتطبيقات الويب في مشروع Vite؟
نثبت حزمة react-router-dom المخصصة لبيئة المتصفح وتطبيقات الويب.
ما مزود التوجيه القياسي الموصى به لتطبيقات الويب الحديثة في بيئة الإنتاج؟
يُعد BrowserRouter الخيار القياسي لأنه يوفر عناوين نظيفة وقياسية لمحركات البحث والمستخدمين.
متى يكون مزود MemoryRouter الخيار الهندسي الأنسب بدلاً من BrowserRouter؟
يُستخدم MemoryRouter في اختبارات المكونات والمحاكيات المعزولة لأنه يدير السجل بالذاكرة عبر initialEntries.
ما الخاصية المعتمدة في عنصر <Route> لتمرير مكون الصفحة بصياغة JSX في الإصدار الحديث؟
يعتمد الإصدار السادس خاصية element لتمرير عنصر JSX مثل element={<CoursesPage />}.
تختار حاوية <Routes> في الإصدار الحديث المسار الأدق مطابقة تلقائياً حتى لو كُتب مسار الجذر "/" فوقه في الكود.
صواب؛ تعتمد React Router خوارزمية تقييم أخصية المسار ولا تتأثر بترتيب كتابة السطور.
ينبغي تغليف كل مكون صفحة فرعية بمزود <BrowserRouter> جديد ومستقل داخل نفس التطبيق.
خطأ؛ يوضع مزود توجيه واحد فقط في قمة شجرة التطبيق لكي تشترك جميع الصفحات في نفس سياق العنوان.
لماذا تفصل مشاريع React المنظمة بين مجلد src/pages/ ومجلد src/components/؟
يضم src/pages/ شاشات المسارات الكاملة المرتبطة بالعناوين، بينما يضم src/components/ الوحدات المشتركة القابلة لإعادة الاستخدام.
لماذا يُضبط خادم الاستضافة لإرجاع ملف index.html عند استخدام BrowserRouter وتحديث مسار فرعي مباشرة؟
إرجاع index.html يسمح بتحميل حزمة React فيقرأ BrowserRouter المسار الحالي ويعرض الصفحة المقابلة بدلاً من خطأ خادم 404.