React Router-da marshrutni o'chirish

Ma'lumotlarni ombordan o'chirish uchun funksiyani yozdik. Keling, endi mahsulot sahifasining dizayniga mahsulotni o'chirish tugmasi bilan kod qismini qo'shamiz. Uni tahrirlash tugmasidan keyin darhol qo'shamiz. Ikkala tugma shaklini #control div-iga o'rab qo'yamiz. Keyin action-ga 'delete' qiymatini yozamiz. Shuningdek, foydalanuvchi mahsulotni o'chirishni xohlayotganini yana bir bor tasdiqlashi uchun dialoq oynasi qo'shamiz:

<div id="control">
	<Form action="edit">
		<button type="submit">tahrirlash</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Ushbu mahsulotni o'chirmoqchimisiz?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">o'chirish</button>
	</Form>
</div>

CSS faylimizga ba'zi uslublarni qo'shamiz:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Endi esa mahsulotni o'chirish uchun yangi marshrut yaratamiz. Buning uchun routes papkasini oching va unda delete.jsx faylini yarating. Unga redirect va deleteProduct o'chirish funksiyasini darhol import qilamiz:

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

Keyin, albatta, action funksiyamizni yozamiz, u id bo'yicha deleteProduct ni chaqiradi va o'chirishdan so'ng bizni asosiy sahifaga yo'naltiradi:

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

Bizga faqat main.jsx ni ochish qoldi. Bizning action ni import qilamiz:

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

Va uni o'chirish marshruti uchun action usulining qiymati sifatida o'rnating. Marshrut ob'ektini children massivi oxiriga qo'shamiz:

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

Endi biz biron bir mahsulotni bosing va uni o'chirish tugmasi yordamida o'chiring. Ishlab chiqaruvchi panelidagi localforage-ga kirib, buni tekshirishingiz mumkin.

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, talabani o'chirish tugmasini qo'shing, o'chirish uchun yangi marshrut yarating va uni pastki marshrutlarga qo'shing. Hammasi ishlashiga ishonch hosil qiling.