NextJS တွင် Dynamic Routes

NextJS တွင် dynamic routes များ ဖန်တီးနိုင်ပါသည်။ ထို routes များတွင် URL ၏ အစိတ်အပိုင်းတစ်ခုသည် မည်သည့်တန်ဖိုးမဆို ရှိနိုင်သည်ဟု ယူဆထားပါသည်။ ဥပမာအားဖြင့် /users/1 လိပ်စာကို ယူကြည့်ပါ၊ ၎င်းတွင် 1 နေရာတွင် မည်သည့်နံပါတ်မဆို ဖြစ်နိုင်ပြီး၊ နည်းပညာအရ user ၏ id နှင့် ကိုက်ညီကာ ကျွန်ုပ်တို့ ပြသလိုသော user ကို ကိုယ်စားပြုပါသည်။

ဤကိစ္စတွင် ဖြစ်နိုင်ခြေရှိသော နံပါတ်တစ်ခုစီအတွက် များစွာသောဖိုင်တွဲများ ဖန်တီးရန် မလိုအပ်ပါ။ ဤလိပ်စာ၏ ထိုအပိုင်းကို dynamic ဟု ကြေငြာရန် လုံလောက်ပါသည်။ ဤကိစ္စတွင် ဤပုံစံရှိသော တောင်းဆိုမှုအားလုံးကို အထွေထွေဖိုင် page.jsx က ကိုင်တွယ်ပါလိမ့်မည်။

Dynamic parameter တစ်ခု ပြုလုပ်ရန်အတွက်၊ သက်ဆိုင်ရာ ဖိုင်တွဲ၏ အမည်ကို စတုရန်းကွင်းများထဲသို့ ထည့်ရန် လိုအပ်ပါသည်။ ကျွန်ုပ်တို့၏ကိစ္စတွင် ၎င်းသည် အောက်ပါ ဖိုင်တွဲများ၏ ဖွဲ့စည်းပုံ ဖြစ်လိမ့်မည်။

/app//users//[id]/

သက်ဆိုင်ရာ component တစ်ခု ပြုလုပ်ကြပါစို့။

app/users/[id]/page.jsxexport default function User() {
  return <p>
    user
  </p>;
}

ဤသို့ဖြင့် ကျွန်ုပ်တို့ သတ်မှတ်ထားသော parameter သည် အထူးအရာparams အတွင်း သိမ်းဆည်းထားပါလိမ့်မည်။ ထို parameter ၏ တန်ဖိုးကို ထုတ်ပြကြပါစို့။

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    user {params.id}
  </p>;
}

Задание 1

/city/:name ပုံစံရှိသော လိပ်စာများကို ကိုင်တွယ်သည့် route တစ်ခု ပြုလုပ်ပါ၊ ယင်းတွင် :name နေရာတွင် မည်သည့် string မဆို ဖြစ်နိုင်ပါသည်။

Задание 2

/show/:country/:city ပုံစံရှိသော လိပ်စာများကို ကိုင်တွယ်သည့် route တစ်ခု ပြုလုပ်ပါ၊ ယင်းတွင် :country နှင့် :city နေရာများတွင် မည်သည့် string မဆို ဖြစ်နိုင်ပါသည်။

Задание 3

/post/:id ပုံစံရှိသော လိပ်စာများကို ကိုင်တွယ်သည့် route တစ်ခု ပြုလုပ်ပါ၊ ယင်းတွင် :id နေရာတွင် မည်သည့်နံပါတ်မဆို ဖြစ်နိုင်ပါသည်။

အောက်ပါ array ကို ပေးထားပါသည်။

page.jsxlet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

export default function Post() {
  
}

id parameter ၏ တန်ဖိုးပေါ် မူတည်၍ component ၏ layout တွင် သက်ဆိုင်ရာ post ကို ပြသအောင် ပြုလုပ်ပါ။

Задание 4

/prod/:id ပုံစံရှိသော လိပ်စာများကို ကိုင်တွယ်သည့် route တစ်ခု ပြုလုပ်ပါ၊ ယင်းတွင် :id နေရာတွင် မည်သည့်နံပါတ်မဆို ဖြစ်နိုင်ပါသည်။

အောက်ပါ array ကို ပေးထားပါသည်။

page.jsxlet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];

export default function Prod() {
  
}

id parameter ၏ တန်ဖိုးပေါ် မူတည်၍ component ၏ layout တွင် သက်ဆိုင်ရာ product ကို ပြသအောင် ပြုလုပ်ပါ။