Slette en rute i React Router

Vi har skrevet funksjonen for å slette data fra lagringsplassen. La oss nå legge til et kodesnutt med en knapp for å slette produktet i sidens oppsett. La oss legge det til rett etter redigeringsknappen. Vi omslutter begge skjemaene med knapper i en div #control. Deretter skriver vi verdien 'delete' i action. Vi legger også til en dialogboks som spør brukeren om bekreftelse - om hen virkelig ønsker å slette produktet:

<div id="control">
	<Form action="edit">
		<button type="submit">rediger</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Vil du slette dette produktet?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">slett</button>
	</Form>
</div>

La oss også legge til noen stiler i CSS-filen vår:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Og nå skal vi opprette en ny rute for å slette produktet. For å gjøre dette, åpner du mappen routes og oppretter en fil i den kalt delete.jsx. La oss legge til import av redirect og slettingsfunksjonen deleteProduct med en gang:

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

Og deretter, selvfølgelig, skriver vi vår action-funksjon, som vil kalle deleteProduct med id, og etter sletting omdirigere oss til hovedsiden:

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

Alt som gjenstår for oss er å åpne main.jsx. Importere vår action:

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

Og sette den som verdi for action-metoden til slettingsruten. Selve ruteobjektet legger vi til på slutten av arrayet children:

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

Nå kan vi klikke på et hvilket som helst produkt og slette det ved hjelp av slettknappen. Du kan sjekke i localforage i utviklerverktøyene og bekrefte at det er gjort.

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Bruk materialet fra leksjonen til å legge til en knapp for å slette en student, opprett en ny rute for sletting, og legg den til i underrutene. Forsikre deg om at alt fungerer.