useParams Hook ( React-Router-Dom)

ကျတော်တို့ react-router ကို အသုံးပြုပြီးတော့ route တွေကို ကျတော်တို့ page ချိန်းတာတို့ လုပ်တာကို‌

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

ကျတော်တို့ က လက်ရှိ ဘယ် route ကို ရောက်နေတာလည်းဆိုပြီးတော့ ပြန်ပြီးတော့ သိဖို့လိုအပ်တဲ့အခါမျိုးတွေ

ရှိပါတယ်

မြင်သာအောင်ပြောရရင် ဘယ်လိုအခြေအနေမျိုးတွေမှာဆိုရင်တော့ ကျတော်တို့ e-commerce page

တခုကို မြင်ကြည့်ရအောင်

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

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

item/1

ဒီလိုလေးတွေမျိုးပေါ့ အဲဒါက ဘာဖြစ်သွားတာလည်းဆိုတော့ ကျတော်တို့က id လေးတွေ တနည်းပြောရရင်

dynamic route တွေပေါ့ဗျ အဲလိုမျိုးဖြစ်သွားတဲ့ id တွေ dynamic တွေဖြစ်တဲ့ route ကို ကျတော်တို့က

ဘယ် id ဘယ် name နဲ့ရောက်နေတာပါဆိုပြီးတော့ ပြန်သိစေချင်တဲ့အခါမှာ useParams hook

ကိုအသုံးပြုပေးရပါတယ်

ကဲ ကျတော်တို့ ကုဒ်လေးတွေကို ဒီလိုလေးအရင်ရေးလိုက်ကြရအောင်

function DynamicRoute () {
    return (
        <div>DynamicRoute</div>
    )
}
export default DynamicRoute 

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

အဲဒီအတွက် ကျတော်တို့က Route တွေမှာ သူ့ကို ဒီလိုလေး အသုံးပြုထားလိုက်ပါမယ်

<Route path="/product/:id" element={<DynamicRoute />}></Route>

အဲဒီမှာ ကျတော်တို့ စတင်ပြီးတော့ မြင်ရမှာပါ product ရဲ့ အနောက်မှာ full colon နဲ့ id လေးကိုရေးထားတာပါပဲ

အဲလိုမျိုးရေးထားလိုက်ရင် react router က ဘယ်လိုမျိုး မြင်တာလည်းဆိုတော့ ဒီ route က dynamic

ပြောင်းလဲ ပြီးတော့လာနိုင်တယ်ဆိုပြီးတော့ သူက သိပါတယ်

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

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

ဆက်ပြီးတော့ ကျတော်တို့ hook လေးကိုအသုံးပြလိုက်ကြရအောင်

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

import { useParams } from 'react-router-dom'

သူ့ကိုအသုံးပြုရင် သူက object value တစ်ခုကို return ပြန်ပေးပါတယ် အဲဒါကို ကျတော်တို့

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

const params = useParams()
  console.log(params)

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

ကျတော်တို့ Route မှာရေးခဲ့တဲ့ :id လေးက ဒီအချိန်မှာ object ရဲ့ key အနေနဲ့ ဝင်လာပြီးတော့ ကျတော်တို့

တကယ့် route ရဲ့ number ကို ကတော့ string type အဖြစ် object value အနေနဲ့ ပြပေးပါတယ်

သူ့ကို ကျတော်တို့က ရသွားပြီးဖြစ်တဲ့အတွက် ကျတော်တို့ ကြိုက်တဲ့ id number ကိုပြောင်းပါစေ

သူက ဒီလိုလေး ပြောင်းလဲပြီးတော့ ပြသွားပါလိမ့်မယ်

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

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

import React from 'react'

import { useParams } from 'react-router-dom'

function DynamicRoute() {
  const params = useParams()
  console.log(params)
  return (
    <div>
      <h1>{params.id}</h1>
    </div>
  )
}

export default DynamicRoute

params က object type ဖြစ်တဲ့အတွက် ကျတော်တို့ သူ့ကို destructuring ပုံစံနဲ့ ရေးလို့လည်းရပါတယ်

ဒီလိုလေးဖြစ်သွားမှာပါ

import React from 'react'

import { useParams } from 'react-router-dom'

function DynamicRoute() {
  const params = useParams()
  console.log(params)
  const {id} = params;
  return (
    <div>
      <h1>{id}</h1>
    </div>
  )
}

export default DynamicRoute

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