Additional React-Router-Dom

ကျတော်တို့ react-router ကို လေ့လာတဲအခါမှာ ကျန်တဲ့ဟာလေးတွေအထဲမှာမှ အသုံးဝင်တဲ့ အရာလေးကို

ကျတော်တို့ လေ့လာဖို့လည်းလိုပါတယ်

အဲဒါက ဘာလည်းဆိုတော့ router ကို ချိန်းတဲ့အခါမှာ လိုအပ်တဲ့ tip လေးနဲ့ သူ့ရဲ့ hook တစ်ခုဖြစ်တဲ့

useNavigate hook လေးပါပဲ့

အဲဒါကိုလေ့လာသွားကြရအောင်ဗျ

အရင်ဆုံး ကျတော်တို့ ဒီလိုလေးရေးလိုက်ပါမယ်

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/product">Product</a>
<Routes>
    <Route path="/" element={<Home />}></Route>
</Routes>

ကျတော်တို့ html မှာဆိုရင် page တစ်ခုနဲ့ တစ်ခု အကူးအပြောင်းကို သွားချင်တဲ့အခါမှာ သုံးတဲ့ a tag

လေးကို အသုံးပြုပြီးတော့ route တွေကို ပြောင်းလို့ရပါတယ်ဗျ

href ထဲမှာ က ကျတော့ ကျတော်တို့ သွားစေချင်တဲ့ route page ကို ရေးထားပြီးတော့ သူ့ကို route ထဲမှာ

ဒီလိုလေးရေးလိုက်ပါမယ်

<Routes>
    <Route path="/" element={<Home />}></Route>
    <Route path="/about" element={<About />}></Route>
    <Route path="/product" element={<Product />}></Route>
</Routes>

ဒီလိုလေးရေးလိုက်ပြီးတော့ ကျတော်တို့ browser မှာသွားကြည့်တဲ့အခါမှာ ဒီလိုလေး မြင်ရပါမယ်

ဒီလိုလေး မြင်ရတဲ့အခါမှာ ကျတော်တို့ အပေါ်က address bar ထဲမှာ ရှိတဲ့ localhost:5173

ရဲ့အနောက်မှာ ဘာမှ မရှိတာကို မြင်ရပါလိမ့်မယ်အဲဒါက “/” ဒီဟာကိုပြောချင်တာပါ

နောက်ထပ် route ကိုသွားဖို့အတွက် ကျတော် about လေးကိုနိပ်လိုက်ပါမယ်

ဒီလိုလေး ဖြစ်သွားတာကိုမြင်ရပါမယ်

ဒီလောက်ဆိုရင်ကျတော်တို့ တော်တော်လေး နားလည်သွားမယ်လို့ထင်ပါတယ်

အဲဒီတော့ ကျတော်တို့ နောက်ထပ် ဟာလေးတွေကို ဆက်လေ့လာသွားကြရအောင်

အဲဒါက ဘာလည်းဆိုတော့ NavLink နဲ့ Link ဆိုတဲ့ဟာလေးတွေပါပဲ

သူတို့က ဘယ်လိုမျိုးအလုပ်လုပ်ပေးတာလည်းဆိုတာကို ကြည့်လိုက်ကြရအောင်

import {Routes , Route, Link , NavLink} from 'react-router-dom'

အရင်ဆုံး ကျတော်တို့ react-router-dom ကနေပြီးတော့ သူတို့ကို import လုပ်လိုက်ပါမယ်

ပြီးသွားရင် ကျတော်တို့က ခုနက a tag တွေအစား ဒီလိုလေးပြောင်းလဲပြီးတော့ရေးလိုက်ပါမယ်

<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/product">Product</Link>
// rest of code

ဒီလိုလေးရေးပြီးတော့ browser မှာသွားကြည့်လိုက်ရင် ကျတော်တို့ ခုနက အတိုင်းလေး မြင်ရပါလိမ့်မယ် ဗျ

သူ့ရဲ့အလုပ်လုပ်ပုံက a tag နဲ့ သိပ်မကွာသွားပါဘူး a tag ရဲ့ href အစား to ဆိုပြီးတော့ ပြောင်းလဲ သုံးပေးရုံပါပဲ

နောက်တစ်ခုဖြစ်တဲ့ NavLink ကို ဆက်ကြည့်လိုက်ကြရအောင်ဗျ

<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
<NavLink to="/product">Product</NavLink>
// rest of code

ဒီလိုလေးရေးပြီးတော့ ကျတော်တို့ browser မှာသွားကြည့်တဲ့အခါမှာ ခုနက လိုပဲ အတူတူပဲ သွားပါတယ်

ဒါပေမယ့် သူ့မှာက ထူးခြားတာ တခုက ဘာလည်းဆိုတော့

ကျတော်တို့က လက်ရှိရောက်နေတဲ့ route ရဲ့ nav link ( ‌a tag ) ထဲကို class ‘activ’ လေး ကို

ထည့်ပေးသွားတာကို မြင်ရပါလိမ့်မယ်

Inspect ထောက်ပြီး ကြည့်ရင် ဒီလိုလေး မြင်ရပါလိမ့်မယ် အဲလိုမျိုး မြင်ရတော့ ကျတော်တို့က nav link ကို

active ဖြစ်အောင် ပြဖို့အတွက်က လွယ်ကူသွားပါတယ်

သူ့ရဲ့ class active ကို ကျတော်တို့ index.css မှာ လိုအပ်တဲ့ css code လေးတွေ သွားရေးလိုက်တဲ့အခါမှာ

ကျတော်တို့အတွက် UX ( user experience ) ပိုင်းမှာ တော်တော်လေး အဆင်ပြေသွားစေပါတယ်

ဒီလိုလေး မြင်ရပါလိမ့်မယ်

ဒီလောက်ဆိုရင် ကျတော်တို့ react-router ကို တော်တောလေး နားလည်သွားမယ်လို့မြင်ပါတယ်