مقدمة إلى React Router
تعرف على كيفية React Router بتبسيط عملية التنقل وتعزيز قابلية التوسع في تطبيقات الصفحة الواحدة.
غالبًا ما تتطلب تطبيقات React التنقل بين صفحات أو عروض مختلفة، مثل صفحات "الرئيسية" و"حول" و"المشاريع" و"اتصل بنا". عادةً ما يتم ذلك عن طريق إدارة الحالة يدويًا أو إنشاء ملفات HTML متعددة. مع ذلك، مع نمو التطبيقات، يصبح هذا النهج مُرهقًا ويفتقر إلى ميزات أساسية، مثل التنقل السلس والتوجيه القائم على عناوين URL. لنستكشف سيناريو بناء تطبيق ويب صغير باستخدام تقنيات تطوير الويب التقليدية، ونفهم التحديات التي يطرحها. سنحل هذا السيناريو باستخدام React Router لتسليط الضوء على فوائده.
دراسة حالة: تطبيق المحفظة
نحن بحاجة إلى بناء موقع محفظة مع الصفحات التالية:
الصفحة الرئيسية: صفحة الترحيب.
حول: معلومات عن الفرد.
المشاريع: معرض للمشاريع المنجزة.
الاتصال: صفحة للتواصل.
التنفيذ بدون React Router
أولاً، سنقوم بتنفيذه بدون React Router لفهم قيود إدارة التنقل يدويًا.
حدود نهج الملاحة اليدوية
لا يوجد عناوين URL للصفحات: لا يستخدم التطبيق عناوين URL فريدة لكل صفحة، مما يجعل من المستحيل وضع إشارة مرجعية على الروابط أو مشاركتها.
تجربة مستخدم سيئة: يؤدي تحديث المتصفح إلى إعادة تعيين التطبيق إلى الحالة الافتراضية (الصفحة الرئيسية).
الإدارة اليدوية: تتطلب إضافة صفحات جديدة تحديث
renderPageوظيفة وشريط التنقل يدويًا.مشاكل تحسين محركات البحث: لا تستطيع محركات البحث الزحف إلى الصفحات الفردية بسبب عدم وجود عناوين URL.
لتناول هذه القيود، يمكننا استخدام React Router، وهي مكتبة قوية مصممة للتعامل مع التوجيه في تطبيقات React .
جهاز توجيه React
React Router هو المعيار الفعلي لإدارة التوجيه في تطبيقات React . فهو يتيح للمطورين تحديد المسارات، والتنقل بين العروض، وإدارة معلمات URL بكفاءة. بفضل ميزاته القوية وقدراته التكاملية، يُعد React Router أساسيًا لبناء تطبيقات الصفحة الواحدة (SPAs) الحديثة.
تطبيقات الصفحة الواحدة (SPA)
تطبيق الصفحة الواحدة (SPA) هو تطبيق ويب يُحمّل ويُحدّث المحتوى ديناميكيًا على صفحة HTML واحدة. بدلًا من جلب ملف HTML جديد لكل مسار، تُقدّم تطبيقات الصفحة الواحدة المحتوى ديناميكيًا بناءً على عنوان URL. هذا يُحسّن الأداء ويُسهّل تجربة المستخدم.
إعادة بناء تطبيق المحفظة باستخدام React Router
إليك نفس تطبيق المحفظة الذي تم تنفيذه باستخدام React Router:
ملاحظة : لا تقلق بشأن هياكل الترميز الجديدة مثل
Router،Routes،Route، وLinkسوف نستكشف هذه الأمور بالتفصيل في الدروس القادمة.
فوائد استخدام React Router
تنقل سلس: لا توجد عمليات إعادة تحميل للصفحة بالكامل؛ والانتقالات بين وجهات النظر سلسة وسريعة.
التوجيه المستند إلى عنوان URL: يتمتع كل مسار بعنوان URL فريد، مما يجعل من الأسهل وضع إشارة مرجعية على الروابط ومشاركتها.
ديناميكية وقابلة للتطوير: إضافة مسارات جديدة أمر بسيط مثل تعريف مسار جديد
Routeعنصر.تحسين محرك البحث (SEO): يمكن تحسين تطبيقات الصفحة الواحدة (SPA) مع React Router لتحسين محرك البحث (SEO) باستخدام أدوات العرض على جانب الخادم أو أدوات العرض المسبق.
من خلال الانتقال من النهج اليدوي إلى استخدام React Router، تمكنا من حل قيود التنقل التقليدي.
مصفوفة المقارنة: التنقل اليدوي مقابل React Router
فيما يلي مقارنة تفصيلية بين التنقل اليدوي و React Router لتسليط الضوء على اختلافاتهما ومساعدتنا على فهم سبب تفضيل React Router لتطبيقات الويب الحديثة.
Aspect | Manual navigation (Without React Router) | React Router |
Navigation | Handled manually using | Managed automatically using the |
URLs for pages | No URL updates; all navigation is internal, breaking browser behavior like bookmarks. | Each page has a unique URL, enabling bookmarking and sharing. |
Browser refresh | Refresh resets the app to the default state, losing the current page. | Refresh preserves the current page using URL-based routing. |
Scalability | Difficult to manage as the app grows; adding new pages requires modifying state and navigation. | Easily scalable; new pages require defining a new |
SEO optimization | Poor; search engines cannot index individual pages. | Better; supports unique URLs for pages, aiding indexing (with additional tools like SSR for optimization). |
Code reusability | Repeated code (e.g., navigation bar) across multiple components. | Common components like navigation are defined once and reused across the app. |
Performance | Slower; page state is re-evaluated for every render, especially with many conditions. | Faster; React Router handles rendering efficiently without re-evaluating state manually. |
Dynamic routing | Not feasible without significant custom logic. | Supported out of the box with route parameters. |
User experience | Less smooth; full-page reloads or manual updates create delays. | Seamless; no full-page reloads, resulting in better performance and experience. |
النقاط الرئيسية
يعد التنقل اليدوي نهجًا سريعًا ومباشرًا للتطبيقات الصغيرة ولكنه غير قابل للتطوير أو فعال للمشاريع الأكبر.
يقدم React Router ميزات تنقل وتوجيه قوية ضرورية لبناء تطبيقات الصفحة الواحدة (SPA) الحديثة والقابلة للتطوير وسهلة الاستخدام.