React Router'до маршрутту өчүрүү

Далаттарды сактоочу жайдан өчүрүү функциясын жаздык. Эми продукттун баракчасынын версткасына продуктту өчүрүү үчүн баскычы бар коддун бөлүгүн кошолу. Аны түзөтүү баскычындан кийин дароо кошолу. Эки баскычтын формаларын #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 функциябызды жазабыз, ал deleteProduct-ти id боюнча чакырат, өчүрүүдөн кийин бизди башкы баракчага багыттайт:

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

Бизге гана main.jsx ачыш керек. Биздин action импорттош керек:

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

Жана аны өчүрүү маршрутунун action методунун мааниси катары коюш керек. Маршруттун өз объектин биз массивдин children аягына кошобуз:

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

Эми биз каалаган продуктубузга чыкып, аны өчүрүү баскычы менен өчүрө алабыз. Өзүңүз ишенүү үчүн иштеп чыгуучунун панелиндеги localforage'ге кире аласыз.

Мурунку сабактардын тапшырмаларында түзгөн тиркемеңизди алыңыз. Сабақтын материалын пайдаланып, студентти өчүрүү үчүн баскыч кошуңуз, өчүрүү үчүн жаңы маршрут жасаңыз, аны бала маршруттарга кошуңуз. Баары иштеп жатканына көзүңүз жеткиргиле.