useNavigate Hook ( React-Router-Dom)

ကျတော်တို့ react router ရဲ့ hook တစ်ခုဖြစ်တဲ့ useNavigate ကလည်းတော်တော်လေး အသုံးဝင်ပါတယ်

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

redirect လုပ်ရတဲ့အခါမှာ လည်း သူက တော်တော်လေးအသုံးဝင်ပါတယ်

ကျတော်တို့ လေ့လာလိုက်ကြရအောင်

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

import { useNavigate } from "react-router-dom"
// rest of code 

ဒီလိုလေး import လုပ်လိုက်ပြီးရင် ကျတော်တို့က သူ့ကိုအသုံးပြုမှာပါ

သူ့ကိုအသုံးပြုရင် သူက method တခုကို return ပြန်ပေးပါတယ်

အဲဒါကို ကျတော်က ဒီလိုလေး သိမ်းလိုက်ပါမယ်

const navigate = useNavigate()
//rest of code

အဲဒီ method ထဲမှာ သူက parameter တွေကို string value အနေနဲ့ လက်ခံပါတယ်

အဲဒါကို ကျတော်တို့က ဘယ်လိုမျိုး အသုံးပြုလို့ရသွားမှာလည်းဆိုတော့ ကျတော်တို့ function တွေထဲမှာ

သူ့ကိုအသုံးပြုပြီးတော့ သွားစေချင်တဲ့ route ကို redirect လုပ်ခိုင်းလို့ရသွားပါတယ်

ကျတော်တို့ function လေးကို ဒီလိုလေးရေးလိုက်ပါမယ်

const clickHandler = () => {
    // rest of code 
    navigate("/home")
  }

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

<button onClick={clickHandler}>Redirect to route home</button>

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

ဒီလောက်ဆိုရင် သူ့ကိုအသုံးပြုတတ်သွားမယ် ထင်ပါတယ်