React Routerда маршрутни ўчириш

Маълумотларни сақловчидан ўчириш учун функцияни ёздик. Кeling, endi mahsulot саҳифасининг версткасига mahsulotni ўчириш тугмаси билан код қисмини қўшайлик. Уни тахрирлаш тугмасидан кейин darhol қўшамиз. Иккилата тугмали шаклларни #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 файлимизга uslub қўшайлик:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Энди esa mahsulotни ўчириш учун янги маршрут яратамиз. Бунинг учун routes папкасини очинг ва унда delete.jsx файлини яратинг. Унга redirect ва deleteProduct ўчириш функцияларини импорт қиламиз:

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

Сўнгра, tabiiyki, бизнинг action функциямизни ёзамиз, у id бўйича deleteProduct ни чақиradi, ўчиришдан сўнг эса бизни бош саҳифага йўналтиради:

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,
},

Энди биз бирор mahsulot устига босишиб, уни ўчириш тугмаси ёрдамида ўчиришимиз мумкин. Ишлонма панелининг localforage ичига қараб, buni ishonch хосил қилишингиз мумкин.

Олдинги дарслардаги вазифаларда яратган иловангизни олинг. Дарс материалларидан фойдаланиб, талабани ўчириш учун тугма қўшинг, ўчириш учун янги маршрут яратинг, уни бола маршрутларга қўшинг. Ҳамма нарса ишлашига ишонч хосил қилинг.