Reitin poisto React Routerissa

Olemme kirjoittaneet funktion datan poistamiseen tietovarastosta. Lisätkäämme nyt tuotesivun ulkoasuun koodinpala, jossa on painike tuotteen poistamista varten. Lisätkäämme se heti muokkaamispainikkeen jälkeen. Käärimme molemmat lomakkeet painikkeineen div-elementtiin #control. Kirjoitamme sitten action-kohtaan arvon 'delete'. Lisäämme myös valintaikkunan, jotta käyttäjä voi vahvistaa uudelleen - haluaako hän todella poistaa tuotteen:

<div id="control">
	<Form action="edit">
		<button type="submit">muokkaa</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Haluatko poistaa tämän tuotteen?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">poista</button>
	</Form>
</div>

Lisätkäämme myös tyylejä CSS-tiedostoomme:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Ja nyt luomme uuden reitin tuotteen poistamista varten. Avaa tätä varten kansio routes ja luo siihen tiedosto delete.jsx. Lisätkäämme siihen heti import redirect ja poistofunktio deleteProduct:

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

Ja sitten, tietysti, kirjoitamme action-funktion, joka kutsuu deleteProducta id:n perusteella, ja poistamisen jälkeen ohjaa meidät etusivulle:

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

Meidän on enää avattava main.jsx. Tuoda action:

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

Ja asetettava se arvoksi poistoreitin action-metodille. Itse reittiolion lisäämme children- taulukon loppuun:

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

Nyt voimme klikata mitä tahansa tuotetta ja poistaa sen poistopainikkeen avulla. Voit tarkistaa selaimen kehitystyökalujen localforagen ja varmistaa tämän.

Ota edellisten oppituntien tehtävissä luomasi sovellus. Hyödyntäen oppitunnin materiaaleja, lisää painike opiskelijan poistamiseksi, tee uusi reitti poistoa varten, lisää se lapsireitteihin. Varmista, että kaikki toimii.