Sletning af rute i React Router

Funktionen til at slette data fra lageret har vi skrevet. Lad os nu tilføje en del kode med en knap til sletning af produktet i siden produktets layout. Vi tilføjer den lige efter redigeringsknappen. Vi wrapper begge formularer med knapper i en div #control. Derefter i action skriver vi værdien 'delete'. Vi tilføjer også en dialogboks, så brugeren kan bekræfte endnu en gang - om de ønsker at slette produktet:

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

Lad os også tilføje noget styling til vores CSS-fil:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Og nu skal vi oprette en ny rute til sletning af produktet. For at gøre dette, åbn mappen routes og opret filen delete.jsx i den. Lad os straks importere redirect og sletningsfunktionen deleteProduct:

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

Og derefter, naturligvis, skriver vi vores funktion action, som vil kalde deleteProduct på id, og efter sletning omdirigere os til forsiden side:

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

Vi mangler kun at åbne main.jsx. Importere vores action:

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

Og indstille den som værdi for metoden action for sletningsruten. Selv ruteobjektet tilføjer vi i slutningen af arrayet children:

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

Nu kan vi klikke på et eller andet produkt og slette det ved hjælp af sletningsknappen sletning. Du kan kigge i localforage i udviklerpanelet og overbevise dig om dette.

Tag applikationen, som du oprettede i opgaverne til de foregående lektioner. Brug materialerne fra lektionen, tilføj en knap til sletning af studerende, lav en ny rute til sletning, tilføj den til de underordnede ruter. Sørg for, at alt virker.