تم حلها: رد فعل جهاز التوجيه v6 التشويق البطيء

المشكلة الرئيسية المتعلقة بالإثارة البطيئة React Router v6 هي أنها غير مدعومة بالكامل من قبل جميع المتصفحات. هذا يعني أن المستخدمين قد يواجهون مشكلات عند محاولة الوصول إلى صفحات أو ميزات معينة على مواقع الويب باستخدام نظام التعليق الكسول React Router v6. بالإضافة إلى ذلك ، لا تزال هناك بعض الأخطاء ومشكلات الأداء التي يجب معالجتها قبل استخدامها في بيئات الإنتاج. أخيرًا ، لا تزال واجهة برمجة التطبيقات لمكونات التحميل البطيء مع Suspense في مراحلها الأولى وقد تتطلب وقتًا إضافيًا للتطوير لضمان التوافق مع التطبيقات الحالية.

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
 
function AppRouter() { 

    return ( 

        <Router> 

            <Suspense fallback={<div>Loading...</div>}>

                <Switch> 

                    <Route exact path="/" component={Home} /> 

                    <Route path="/about" component={About} /> 

                    <Route path="/contact" component={Contact} />  

                </Switch>  

            </Suspense>  

        </Router>  

    );  
    
}  
export default AppRouter;

1. يستورد هذا الرمز مكتبة React ، بالإضافة إلى مكون Suspense من React ، ومكونات BrowserRouter ، و Route ، و Switch من React-router-dom.
2. تحدد بعد ذلك ثلاثة مكونات (الصفحة الرئيسية ، حول ، جهة الاتصال) باستخدام ميزة التحميل البطيء في React لاستيرادها من الملفات الخاصة بها.
3. يتم تعريف وظيفة AppRouter التي تقوم بإرجاع مكون جهاز التوجيه الذي يحتوي على مكون Suspense مع مكون Switch بداخله.
4. يوجد داخل مكون التبديل ثلاثة مكونات مسار يعرض كل منها أحد المكونات المستوردة عند مطابقة المسارات الخاصة بها في عنوان URL (على سبيل المثال ، "/" للصفحة الرئيسية).
5. أخيرًا ، يتم تصدير AppRouter بحيث يمكن استخدامه في مكان آخر في التطبيق.

كيف تستخدم التحميل البطيء في جهاز التوجيه التفاعلي v6

v6

التحميل الكسول هو تقنية تستخدم لتأجيل تحميل بعض المكونات حتى يتم الاحتياج إليها. في React Router v6 ، يمكن تحقيق التحميل البطيء باستخدام صيغة الاستيراد الديناميكي (). تسمح لك هذه الصيغة بتقسيم الكود الخاص بك إلى حزم متعددة يمكن تحميلها عند الطلب أو بالتوازي. يساعد هذا في تقليل حجم الحزمة الأولي وتحسين الأداء. لاستخدام التحميل البطيء مع React Router v6 ، يجب عليك التفاف المكون الذي تريد تحميله البطيء في استدعاء استيراد ديناميكي (). سيعيد استدعاء الاستيراد () الوعد الذي سيتم حله عندما يتم تحميل المكون ويكون جاهزًا للعرض.

ما هو التشويق و كسول في رد الفعل

يُعد التشويق في React Router طريقة لتأخير تحميل المسار حتى يتم استيفاء بعض الشروط. يمكن استخدام هذا لتحسين أداء التطبيق عن طريق تحميل المسارات فقط عند الحاجة إليها. على سبيل المثال ، إذا كان المستخدم يتنقل إلى صفحة تتطلب المصادقة ، يمكن أن يتأخر المسار حتى اكتمال المصادقة.

يسمح التحميل الكسول في React Router بتحميل المكونات بشكل غير متزامن عند الحاجة بدلاً من تحميلها كلها مرة واحدة. يؤدي ذلك إلى تحسين الأداء عن طريق تحميل المكونات فقط عند الحاجة إليها ويقلل من كمية البيانات التي يجب نقلها عبر الشبكة. يساعد التحميل الكسول أيضًا في تقسيم الكود ، مما يسمح بتقسيم التطبيقات الكبيرة إلى أجزاء أصغر يمكن تحميلها عند الطلب.