Ta bort en rutt i React Router

Vi har skrivit funktionen för att ta bort data från lagringen. Låt oss nu lägga till en del kod med en knapp för att ta bort produkten i sidans utseende. Vi lägger till den direkt efter redigeringsknappen. Vi omsluter båda formulären med knappar i en div #control. Sedan i action skriver vi värdet 'delete'. Vi lägger också till en dialogruta så att användaren kan bekräfta igen - om hen verkligen vill ta bort produkten:

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

Låt oss också lägga till lite stilar i vår CSS-fil:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Och nu ska vi skapa en ny rutt för att ta bort produkten. För att göra detta, öppna mappen routes och skapa filen delete.jsx i den. Låt oss lägga till importen av redirect och borttagningsfunktionen deleteProduct direkt:

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

Och sedan, naturligtvis, skriver vi vår funktion action, som kommer att anropa deleteProduct med id, och efter borttagningen omdirigera oss till startsidan:

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

Allt som återstår för oss är att öppna main.jsx. Importera vår action:

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

Och ställ in den som värde för metoden action i borttagningsrutten. Själva ruttobjektet lägger vi till i slutet av arrayen children:

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

Nu kan vi klicka på någon produkt och ta bort den med hjälp av borttagningsknappen. Du kan kolla in localforage i utvecklarpanelen och verifiera detta.

Ta applikationen du skapade i uppgifterna från tidigare lektioner. Använd lektionens material, lägg till en knapp för att ta bort en student, skapa en ny rutt för borttagning, lägg till den i barnrutterna. Se till att allt fungerar.