تم حلها: رد فعل جهاز التوجيه تحميل كسول

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

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 App() { 

  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 App;

1. استيراد React ، {Suspense} من "رد فعل" ؛
// يستورد هذا الخط مكتبة React ومكوِّن التشويق من مكتبة React.

2. استيراد {BrowserRouter as Router، Route، Switch} من "React-router-dom" ؛
// يستورد هذا الخط مكونات BrowserRouter و Route و Switch من مكتبة React-router-dom.

3. const Home = React.lazy (() => import ('./ Home')) ؛
// ينشئ هذا السطر ثابتًا يسمى Home يستخدم ميزة التحميل البطيء لـ React لاستيراد مكون يسمى Home من ملف في نفس الدليل مثل هذا الملف (مكون التطبيق).

4. const About = React.lazy (() => import ('./ About')) ؛
// ينشئ هذا السطر ثابتًا يسمى حول يستخدم التحميل البطيء لاستيراد مكون يسمى About بشكل ديناميكي من ملف في نفس الدليل مثل هذا الملف (مكون التطبيق).
const Contact = React.lazy (() => استيراد ('./ جهة اتصال')) ؛ // ينشئ هذا السطر ثابتًا يسمى جهة الاتصال يستخدم التحميل البطيء لاستيراد مكون يسمى جهة الاتصال ديناميكيًا من ملف في نفس الدليل مثل هذا الملف (مكون التطبيق).

5. وظيفة التطبيق () {إرجاع ( // هذه وظيفة سهم تقوم بإرجاع كود JSX ملفوفًا في علامة جهاز التوجيه التي تم استيرادها مسبقًا

6.جار التحميل…