React Router တွင် လမ်းကြောင်းတစ်ခုထပ်တိုးခြင်း

ကျွန်ုပ်တို့တွင် အဓိကစာမျက်နှာကို ဦးတည်သော အခြေခံလမ်းကြောင်းရှိပါသည်၊ ထိုစာမျက်နှာတွင် ထုတ်ကုန်များအတွက် လင့်ခ်များပါရှိပါသည်။ ယခုအခါ လမ်းကြောင်းတစ်ခုထပ်မံထည့်သွင်းရန် ကြိုးစားကြပါစို့၊ သို့မှသာ လင့်ခ်တစ်ခုကို နှိပ်လိုက်သည့်အခါ အမှားစာမျက်နှာအစား ထုတ်ကုန်အတွက် စာမျက်နှာလေးတစ်ခု ပေါ်လာမည်ဖြစ်သည်။

ပထမဦးစွာ ကျွန်ုပ်တို့၏ အက်ပ်လီကေးရှင်းကို ဖွင့်ကြည့်ပါ၊ ယခင်သင်ခန်းစာများတွင် ပြုလုပ်ခဲ့သော အက်ပ်ကို ဖွင့်ပြီး routes ဖိုလ်ဒါအတွင်း ဖိုင်အသစ် product.jsx ကို ဖန်တီးပါမည်။ ထိုဖိုင်တွင် ကွန်ပိုနန်႔တ် Product ကို ဖန်တီးပါမည်။

routes/product.jsxfunction Product() {}

export default Product;

ယခု Product ကွန်ပိုနန်႔တ်အတွင်း အရာ၀တ္ထု product ကို ဖန်တီးပါမည်၊ ၎င်း၏ ဂုဏ်သတ္တိများမှာ name, cost နှင့် amount တို့ဖြစ်ပြီး၊ လောလောဆယ်တွင် သတ်မှတ်ထားသော တန်ဖိုးများသာဖြစ်ပါမည်။

routes/product.jsxfunction Product() {
  const product = {
    name: 'ထုတ်ကုန်',
    cost: 400,
    amount: 5,
  };
}

export default Product;

ထုတ်ကုန်စာမျက်နှာတွင် ကျွန်ုပ်တို့သည် သင့်လျော်စွာ ၎င်း၏ အမည်၊ စျေးနှုန်းနှင့် အရေအတွက်ကို ပြသပါမည်။

routes/product.jsxreturn (
  <div>
    <h2>ထုတ်ကုန်စာမျက်နှာ</h2>
    <p>အမည်: {product.name}</p>
    <p>စျေးနှုန်း: {product.cost}</p>
    <p>အရေအတွက်: {product.amount}</p>
  </div>
);

ကွန်ပိုနန်႔တ် Product ကို ဖိုင် main.jsx အတွင်းသို့ သွင်းယူရန် မမေ့ပါနှင့်။

main.jsximport Product from './routes/product';

နောက်ဆုံးအနေနှင့်၊ ကျွန်ုပ်တို့၏ အက်ပ်လီကေးရှင်းထဲသို့ လမ်းကြောင်းတစ်ခုထပ်မံထည့်ပါမည်၊ အခြေခံလမ်းကြောင်း၏ ချက်ချင်း အပြီးတွင် ထည့်သွင်းပါမည်။ လမ်းကြောင်းအဖြစ် 'products/:productId' ကို သတ်မှတ်ပါမည်၊ ပြသရန် အရာဝတ္ထုအဖြစ် ကွန်ပိုနန်႔တ် Product ကို သတ်မှတ်ပါမည်။

main.jsx{
  path: '/',
  element: <Root />,
  errorElement: <ErrorPage404 />,
},
{
  path: 'products/:productId',
  element: <Product />,
},

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