React Router တွင် Client-side Routing

ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် တစ်ခန်းတည်းဝက်ဘ်အပလီကေးရှင်း (SPA) ၏ အရေးကြီးသော အစိတ်အပိုင်းတစ်ခုဖြစ်သည့် ကလိုင်းယင့်ဘက်ခြမ်း လမ်းကြောင်းညွှန်ခြင်း (client-side routing) ကို လေ့လာပါမည်။ ထိုသို့ လမ်းကြောင်းညွှန်ခြင်းသည် ဆာဗာမှ စာရွက်စာတမ်းကို အပို တောင်းဆိုချက်များ မပါဘဲ ဘရောက်ဆာရှိ URL ကို အပ်ဒိတ်လုပ်ခွင့်ပေးပါသည်။

ကျွန်ုပ်တို့ ယခင်သင်ခန်းစာတွင် ဖန်တီးခဲ့သော အပလီကေးရှင်းကို စတင်လိုက်ပါ။ Developer tools panel ကိုဖွင့်ပြီး ၎င်းအတွင်းရှိ 'Network' tab (Chrome အတွက် Network) ကို ဖွင့်ပါ။ ကျွန်ုပ်တို့၏ လင့်ခ်များကို နှိပ်ပြီးတိုင်း document တစ်ခုအတွက် တောင်းဆိုမှုတစ်ခုစီကို မြင်တွေ့ရပါသည်။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့သည် document ကို ဆာဗာမှ တင်ပို့ရန် အခါခပ်သွတ် တောင်းဆိုနေပါသည်။

အခုတော့ ထိုကဲ့သို့သော တောင်းဆိုမှုများမှ ကင်းဝေးစေရန် React Router ၏ အကျိုးကျေးဇူးများကို အသုံးပြုကြပါစို့။ ထိုသို့ပြုလုပ်ရန် ကျွန်ုပ်တို့၏ အပလီကေးရှင်း၏ root.jsx ကိုဖွင့်ပြီး markup ရှိ a tag ကို Link component ဖြင့် အစားထိုးပါမည်။ အစပိုင်းတွင် ၎င်းကို import လုပ်ပါမည်။

import { Outlet, Link } from 'react-router-dom';

ယခု href attribute ပါသော a tag များကို အစားထိုးပါမည်။ ကုဒ်၏အတိုအပိုင်း-

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

အစား ယခုအခါ အောက်ပါကုဒ်ဖြစ်လာပါမည်။

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Developer tools panel ရှိ 'Network' tab ကို ထပ်မံဖွင့်ပါ၊ address bar တွင် root path ကိုသတ်မှတ်ပြီး စာမျက်နှာကို refresh လုပ်ပါ။ ယခု လင့်ခ်များကို နှိပ်ကြည့်ပါက document ကို ကနဦးတင်ချိန်တွင် တစ်ကြိမ်သာ တောင်းဆိုထားပြီး နောက်ထပ်နှိပ်ချက်များတွင် ဆာဗာသို့ တောင်းဆိုမှု မရှိတော့သည်ကို မြင်တွေ့ရပါမည်။

သင် ယခင်သင်ခန်းစာများဆိုင်ရာ အလုပ်များတွင် ဖန်တီးခဲ့သော အပလီကေးရှင်းကို ယူပါ။ သင်ခန်းစာပါ အကြောင်းအရာများကို အသုံးပြု၍ ၎င်းအတွင်း ကလိုင်းယင့်ဘက်ခြမ်း လမ်းကြောင်းညွှန်ခြင်း (client-side routing) ကို အတိုင်းအတာတစ်ခုအထိ အကောင်အထည်ဖော်ပါ၊ သင်၏ လင့်ခ်များကို သင်ခန်းစာတွင် ဖော်ပြထားသည့်အတိုင်း ပြောင်းလဲပါ။