Eliminazione di una rotta in React Router

La funzione per eliminare i dati dal magazzino l'abbiamo scritta. Ora aggiungiamo al layout della pagina del prodotto un pezzo di codice con un pulsante per eliminare il prodotto. Aggiungiamolo subito dopo il pulsante di modifica. Racchiudiamo entrambi i moduli con i pulsanti in un div #control. Poi in action scriviamo il valore 'delete'. Aggiungeremo anche una finestra di dialogo in modo che l'utente confermi ancora una volta - se vuole eliminare il prodotto:

<div id="control">
	<Form action="edit">
		<button type="submit">modifica</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Vuoi eliminare questo prodotto?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">elimina</button>
	</Form>
</div>

Aggiungiamo anche un po' di stili al nostro file CSS:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

E ora creeremo una nuova rotta per l'eliminazione del prodotto. Per fare questo aprite la cartella routes e create al suo interno il file delete.jsx. Aggiungiamo subito l'import di redirect e della funzione di eliminazione deleteProduct:

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

E poi, naturalmente, scriviamo la nostra funzione action, che chiamerà deleteProduct in base all'id, e dopo l'eliminazione ci reindirizzerà alla pagina principale:

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

Ci resta solo di aprire main.jsx. Importare la nostra action:

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

E impostarla come valore per il metodo action della rotta di eliminazione. L'oggetto stesso della rotta lo aggiungeremo alla fine dell'array children:

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

Ora possiamo cliccare su un prodotto a caso ed eliminarlo tramite il pulsante di eliminazione. Potete dare un'occhiata a localforage nel pannello dello sviluppatore e verificarlo.

Prendete l'applicazione creata da voi nei compiti delle lezioni precedenti. Utilizzando il materiale della lezione, aggiungete un pulsante per eliminare lo studente, create una nuova rotta per l'eliminazione, aggiungetela alle rotte figlie. Assicuratevi che tutto funzioni.