ဖြေရှင်းထားသည်- တုံ့ပြန်သည့် router v6 ပျင်းရိသည်းထိတ်ရင်ဖို

React Router v6 ပျင်းရိသည်းထိတ်ရင်ဖိုမှုနှင့်ပတ်သက်သော အဓိကပြဿနာမှာ ဘရောက်ဆာအားလုံးက ၎င်းကို အပြည့်အဝမပံ့ပိုးနိုင်သေးခြင်းကြောင့်ဖြစ်သည်။ ဆိုလိုသည်မှာ React Router v6 ပျင်းရိသည်းထိတ်ရင်ဖိုသုံး၍ ဝဘ်ဆိုက်များရှိ အချို့သောစာမျက်နှာများ သို့မဟုတ် အင်္ဂါရပ်များကို ဝင်ရောက်ကြည့်ရှုသည့်အခါ အသုံးပြုသူများသည် ပြဿနာများကြုံတွေ့ရနိုင်သည်ဟု ဆိုလိုသည်။ ထို့အပြင်၊ ၎င်းကို ထုတ်လုပ်မှုပတ်ဝန်းကျင်တွင် အသုံးမပြုမီ ဖြေရှင်းရန် လိုအပ်သည့် ချို့ယွင်းချက်များနှင့် စွမ်းဆောင်ရည်ဆိုင်ရာ ပြဿနာအချို့လည်း ရှိနေသေးသည်။ နောက်ဆုံးတွင်၊ Suspense ပါသော ပျင်းရိသော loading အစိတ်အပိုင်းများအတွက် API သည် ၎င်း၏အစောပိုင်းအဆင့်တွင်ရှိနေဆဲဖြစ်ပြီး လက်ရှိအပလီကေးရှင်းများနှင့် လိုက်ဖက်မှုရှိစေရန်အတွက် ထပ်လောင်းတီထွင်ချိန်လိုအပ်နိုင်ပါသည်။

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 စာကြည့်တိုက်အပြင် React မှ Suspense အစိတ်အပိုင်း၊ နှင့် BrowserRouter၊ Route နှင့် Switch အစိတ်အပိုင်းများကို react-router-dom မှ တင်သွင်းသည်။
2. ၎င်းသည် ၎င်းတို့၏ သက်ဆိုင်ရာဖိုင်များမှ ၎င်းတို့ကိုတင်သွင်းရန် React ၏ပျင်းရိသောတင်ခြင်းအင်္ဂါရပ်ကို အသုံးပြု၍ အစိတ်အပိုင်းသုံးခု (Home၊ About၊ Contact) ကို သတ်မှတ်သတ်မှတ်သည်။
3. AppRouter လုပ်ဆောင်ချက်သည် ၎င်းအတွင်းရှိ Switch အစိတ်အပိုင်းတစ်ခုပါရှိသော Suspense အစိတ်အပိုင်းတစ်ခုပါရှိသော Router အစိတ်အပိုင်းကို ပြန်ပေးသည့်အရာဟု သတ်မှတ်သည်။
4. Switch အစိတ်အပိုင်း၏ အတွင်းပိုင်းတွင် ၎င်းတို့၏ သက်ဆိုင်ရာ လမ်းကြောင်းများကို URL တွင် ကိုက်ညီသောအခါတွင် တင်သွင်းထားသော အစိတ်အပိုင်းတစ်ခုစီသည် လမ်းကြောင်းတစ်ခုစီကို ပြပေးသည့် လမ်းကြောင်း အစိတ်အပိုင်း (၃) ခု (ဥပမာ၊ '/')။
5. နောက်ဆုံးတွင်၊ AppRouter သည် ၎င်းကို အပလီကေးရှင်းတွင် အခြားနေရာများတွင် အသုံးပြုနိုင်ရန် တင်ပို့ထားသည်။

react router v6 တွင် lazy loading ကို သင်မည်သို့အသုံးပြုသနည်း။

v6

Lazy loading သည် အချို့သော အစိတ်အပိုင်းများ လိုအပ်သည့်အချိန်အထိ တင်ခြင်းအား ရွှေ့ဆိုင်းရန် အသုံးပြုသည့် နည်းလမ်းတစ်ခုဖြစ်သည်။ React Router v6 တွင် dynamic import() syntax ကိုအသုံးပြုခြင်းဖြင့် ပျင်းရိသော loading ကိုအောင်မြင်နိုင်ပါသည်။ ဤ syntax သည် သင့်ကုဒ်ကို ဝယ်လိုအားတွင် သို့မဟုတ် အပြိုင်တင်နိုင်သည့် အစုအဝေးများစွာအဖြစ် ခွဲထုတ်နိုင်သည်။ ၎င်းသည် ကနဦးအစုအဝေးအရွယ်အစားကို လျှော့ချစေပြီး စွမ်းဆောင်ရည်ကို မြှင့်တင်ပေးသည်။ React Router v6 ဖြင့် ပျင်းရိ loading ကို အသုံးပြုရန်၊ သင်သည် ပျင်းရိ load လုပ်လိုသော အစိတ်အပိုင်းကို dynamic import() call တွင် ခြုံထားရပါမည်။ တင်သွင်းခြင်း() ခေါ်ဆိုမှုသည် အစိတ်အပိုင်းကို တင်ပြီး ပြန်ဆိုရန် အဆင်သင့်ဖြစ်သောအခါ ဖြေရှင်းပေးမည့် ကတိတစ်ခု ပြန်ပေးလိမ့်မည်။

သည်းထိတ်ရင်ဖို ပျင်းရိခြင်းဆိုသည်မှာ အဘယ်နည်း

React Router တွင် Suspense သည် အခြေအနေအချို့မပြည့်မီသည်အထိ လမ်းကြောင်းတစ်ခု၏ loading ကိုနှောင့်နှေးစေသောနည်းလမ်းတစ်ခုဖြစ်သည်။ အပလီကေးရှင်းတစ်ခု၏ စွမ်းဆောင်ရည်ကို မြှင့်တင်ရန်အတွက် ၎င်းကို လိုအပ်သည့်အခါတွင် လမ်းကြောင်းများတင်မှသာ အသုံးပြုနိုင်သည်။ ဥပမာအားဖြင့်၊ အသုံးပြုသူတစ်ဦးသည် အထောက်အထားစိစစ်ခြင်း လိုအပ်သည့် စာမျက်နှာသို့ သွားလာနေပါက၊ အထောက်အထားစိစစ်ခြင်း မပြီးမချင်း လမ်းကြောင်းနှောင့်နှေးနိုင်သည်။

React Router တွင် Lazy loading သည် အစိတ်အပိုင်းများကို တစ်ကြိမ်တည်းတင်မည့်အစား လိုအပ်သောအခါတွင် အစိတ်အပိုင်းများကို တစ်ချိန်တည်းတွင် တပြိုင်နက်တင်ရန် ခွင့်ပြုသည်။ ၎င်းသည် လိုအပ်သည့်အခါ အစိတ်အပိုင်းများကိုသာ တင်ခြင်းဖြင့် စွမ်းဆောင်ရည်ကို မြှင့်တင်ပေးပြီး ကွန်ရက်ပေါ်တွင် လွှဲပြောင်းလိုသည့် ဒေတာပမာဏကို လျှော့ချပေးသည်။ Lazy loading သည် ကုဒ်ပိုင်းခြားခြင်းကို ကူညီပေးပြီး ကြီးမားသော အပလီကေးရှင်းများကို ဝယ်လိုအားတွင် တင်နိုင်သည့် သေးငယ်သည့်အပိုင်းများအဖြစ် ခွဲထုတ်နိုင်စေပါသည်။