Fshirja e rrugës në React Router

Ne kemi shkruar funksionin për të fshirë të dhënat nga depoja. Le të shtojmë tani në faqen e produktit një pjesë kodi me një buton për fshirjen e produktit. Le ta shtojmë atë menjëherë pas butonit të editimit. Le t'i mbështjellim të dyja format me butona në një div #control. Pastaj në action do të shkruajmë vlerën 'delete'. Gjithashtu do të shtojmë një dritare dialogu që përdoruesi të konfirmojë përsëri - dëshiron ai të fshijë produktin:

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

Le të shtojmë gjithashtu disa stile në skedarin tonë CSS:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Tani do të krijojmë një rrugë të re për fshirjen e produktit. Për këtë, hapni dosjen routes dhe krijoni në të skedarin delete.jsx. Le të shtojmë në të menjëherë importin redirect dhe funksionin e fshirjes deleteProduct:

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

Pastaj, natyrisht, shkruajmë funksionin tonë action, i cili do të thërrasë deleteProduct sipas id, dhe pas fshirjes do të na ridrejtojë në faqen kryesore:

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

Na mbetet vetëm të hapim main.jsx. Të importojmë action tonë:

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

Dhe ta vendosim atë si vlerë për metodën action të rrugës së fshirjes. Vetë objektin e rrugës do ta shtojmë në fund të vargut children:

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

Tani mund të klikojmë në një produkt dhe ta fshijmë atë duke përdorur butonin e fshirjes. Mund të shikoni në localforage të panelit të zhvilluesit dhe të verifikoni këtë.

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të mëparshme. Duke përdorur materialet e mësimit, shtoni një buton për fshirjen e studentit, bëni një rrugë të re për fshirje, shtojeni atë në rrugët fëmijë. Sigurohuni që gjithçka funksionon.