נפתרה: להגיב נתב v6 מתח עצלן

הבעיה העיקרית הקשורה למתח העצל של React Router v6 היא שהוא עדיין לא נתמך במלואו על ידי כל הדפדפנים. משמעות הדבר היא שמשתמשים עשויים להיתקל בבעיות בעת ניסיון לגשת לדפים מסוימים או לתכונות באתרי אינטרנט באמצעות מתח עצלן של React Router v6. בנוסף, יש עדיין כמה באגים ובעיות ביצועים שצריך לטפל בהם לפני שניתן יהיה להשתמש בו בסביבות ייצור. לבסוף, ה-API לטעינה עצלנית של רכיבים עם 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 אשר מחזירה רכיב נתב המכיל רכיב מתח ובתוכו רכיב Switch.
4. בתוך רכיב ה-Switch נמצאים שלושה רכיבי מסלול שכל אחד מהם מציג אחד מהרכיבים המיובאים כאשר הנתיבים שלהם מתאימים בכתובת ה-URL (למשל, '/' עבור הבית).
5. לבסוף, AppRouter מיוצא כך שניתן יהיה להשתמש בו במקום אחר באפליקציה.

איך אתה משתמש בטעינה עצלה ב-react router v6

v6

טעינה עצלה היא טכניקה המשמשת לדחיית הטעינה של רכיבים מסוימים עד לצורך. ב-React Router v6, ניתן להשיג טעינה עצלה על ידי שימוש בתחביר ה-import() הדינמי. תחביר זה מאפשר לך לפצל את הקוד שלך למספר חבילות אשר לאחר מכן ניתן לטעון לפי דרישה או במקביל. זה עוזר להקטין את גודל החבילה הראשוני ולשפר את הביצועים. כדי להשתמש בטעינה עצלה עם React Router v6, עליך לעטוף את הרכיב שברצונך לטעון בעצלתיים בקריאה דינמית של import() . הקריאה import() תחזיר הבטחה שתפתר כאשר הרכיב נטען ומוכן לעיבוד.

מה זה מתח ועצלן בתגובה

מתח בנתב React היא דרך לעכב טעינת מסלול עד לתנאי כלשהו. זה יכול לשמש כדי לשפר את הביצועים של יישום על ידי טעינת מסלולים רק כאשר הם נחוצים. לדוגמה, אם משתמש מנווט לעמוד הדורש אימות, ניתן לעכב את המסלול עד להשלמת האימות.

טעינה עצלה ב-React Router מאפשרת לטעון רכיבים באופן אסינכרוני כאשר יש צורך בהם במקום להיטען בבת אחת. זה משפר את הביצועים על ידי טעינת רכיבים בלבד כאשר הם נדרשים ומפחית את כמות הנתונים שיש להעביר דרך הרשת. טעינה עצלה מסייעת גם בפיצול קוד, ומאפשרת פירוק של יישומים גדולים יותר לנתחים קטנים יותר שניתן לטעון לפי דרישה.