Marsruudi kustutamine React Routeris

Andmete hoidlast kustutamise funktsiooni oleme kirjutanud. Lisame nüüd lehe veerustusse toote lehel koodilõigu kustutamise nupuga. Lisame selle kohe pärast muutmise nuppu. Mõlemad vormid koos nuppudega pakendame div'i #control. Seejärel kirjutame action väärtuseks 'delete'. Lisaks lisame dialoogiakna, et kasutaja saaks veel kord kinnitada, kas ta soovib toote kustutada:

<div id="control">
	<Form action="edit">
		<button type="submit">muuda</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Kas soovite selle toote kustutada?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">kustuta</button>
	</Form>
</div>

Lisame oma CSS faili ka mõned stiilid:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Ja nüüd loome uue marsruudi toote kustutamiseks. Selleks avage kaust routes ja looge selles fail delete.jsx. Lisame sinna kohe import'i redirect ja kustutusfunktsiooni deleteProduct:

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

Ja siis loomulikult kirjutame oma funktsiooni action, mis kutsub välja deleteProduct vastavalt id-le, ja pärast kustutamist suunab meid avalehele:

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

Meil jääb üle vaid avada main.jsx. Importida oma action:

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

Ja määrata see väärtuseks meetodile action kustutamise marsruudil. Marsruudi objekti lisame massiivi children lõppu:

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

Nüüd saame klõpsata mõnel tootel ja kustutada selle kustutamisnupu abil. Võite vaadata arendajapaneeli localforage'i ja selles veenduda.

Võtke rakendus, mille lõite ülesannetes eelmiste tundide jaoks. Kasutades tunni materjale, lisage nupp õpilase kustutamiseks, looge uus kustutamise marsruut, lisage see alammarsruutidesse. Veenduge, et kõik töötab.