React Router တွင် လမ်းကြောင်းဖျက်ခြင်း

ဒေတာသိုလှောင်ရာမှ ဒေတာများကို ဖျက်ရန် လုပ်ဆောင်ချက်ကို ကျွန်ုပ်တို့ရေးသားပြီးဖြစ်သည်။ ယခုတော့ ထုတ်ကုန်စာမျက်နှာရဲ့ ကုဒ်ဖွဲ့စည်းပုံထဲမှာ ထုတ်ကုန်ဖျက်ရန် ခလုတ်ပါဝင်သော ကုဒ်အပိုင်းအစကို ထည့်သွင်းလိုက်ပါ။ ပြင်ဆင်ခလုတ်ရဲ့နောက်မှာ တန်းထည့်လိုက်ပါ။ ခလုတ်နှစ်ခုစလုံးပါဝင်သော ဖောင်နှစ်ခုကို div #control အတွင်းသို့ ထည့်သွင်းလိုက်ပါ။ ထို့နောက် action အတွက် တန်ဖိုး 'delete' ဟုရေးပါ။ ထို့အပြင် သုံးစွဲသူအနေဖြင့် ထုတ်ကုန်ကို ဖျက်လိုကြောင်း ထပ်မံအတည်ပြုနိုင်ရန် ဆွေးနွေးဝိုင်းတစ်ခုကိုလည်း ထည့်သွင်းပါမည်။

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">edit</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('Do you want to delete this product?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">delete</button>
  </Form>
</div>

ကျွန်ုပ်တို့ရဲ့ CSS ဖိုင်ထဲသို့ စတိုင်များကိုလည်း ထည့်သွင်းလိုက်ပါ။

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

ယခုအချိန်တွင် ထုတ်ကုန်ဖျက်ရန် လမ်းကြောင်းအသစ်တစ်ခုကို ဖန်တီးပါမည်။ ဤသို့လုပ်ဆောင်ရန် ဖိုဒါ routes ကိုဖွင့်ပြီး ၎င်းအတွင်း ဖိုင် delete.jsx ကိုဖန်တီးပါ။ ၎င်းထဲသို့ redirect နှင့် ဖျက်ခြင်း လုပ်ဆောင်ချက် deleteProduct ကို တင်သွင်းပါ။

routes/delete.jsximport { redirect } from 'react-router-dom';
import { deleteProduct } from '../forStorage';

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

routes/delete.jsxexport async function action({ params }) {
  await deleteProduct(params.productId);
  return redirect('/');
}

ကျွန်ုပ်တို့အနေဖြင့် ဖိုင် main.jsx ကို ဖွင့်ရန်သာလိုတော့သည်။ ကျွန်ုပ်တို့ရဲ့ action ကို တင်သွင်းပါ။

main.jsximport { action as deleteAction } from './routes/delete';

ပြီးလျှင် ဖျက်ခြင်းလမ်းကြောင်းအတွက် action method ၏တန်ဖိုးအဖြစ် သတ်မှတ်ပါ။ လမ်းကြောင်း object ကိုမူ children array ၏အဆုံးတွင် ထည့်သွင်းပါမည်။

main.jsx{
  path: 'products/:productId/delete',
  action: deleteAction,
},

ယခုအခါ ကျွန်ုပ်တို့သည် မည်သည့်ထုတ်ကုန်ကိုမဆို နှိပ်ပြီး ဖျက်ခလုတ်ကို အသုံးပြု၍ ဖျက်နိုင်ပါပြီ။ ဖွံ့ဖြိုးမှုဘောင်အပြာဘောင်ရှိ localforage ထဲသို့ ဝင်ရောက်ကြည့်ရှုကာ အတည်ပြုနိုင်ပါသည်။