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

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

<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 ဖိုင်ထဲသို့ စတိုင်များကိုလည်း ထည့်သွင်းလိုက်ပါ။

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

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

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

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

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

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

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

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

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

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

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