Suppression de route dans React Router

Nous avons écrit la fonction pour supprimer les données du stockage. Maintenant, ajoutons dans le rendu de la page produit un morceau de code avec un bouton pour supprimer le produit. Ajoutons-le immédiatement après le bouton d'édition. Englobons les deux formulaires avec boutons dans une div #control. Puis dans action nous écrirons la valeur 'delete'. Nous ajouterons également une boîte de dialogue pour que l'utilisateur confirme à nouveau - souhaite-t-il supprimer le produit :

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

Ajoutons également quelques styles dans notre fichier CSS :

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Et maintenant, nous allons créer une nouvelle route pour la suppression du produit. Pour cela, ouvrez le dossier routes et créez-y le fichier delete.jsx. Ajoutons-y immédiatement l'import de redirect et de la fonction de suppression deleteProduct :

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

Puis, naturellement, nous écrivons notre fonction action, qui appellera deleteProduct via id, et après la suppression nous redirigera vers la page principale :

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

Il ne nous reste plus qu'à ouvrir main.jsx, d'importer notre action :

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

Et à la définir comme valeur pour la méthode action de la route de suppression. L' objet de route lui-même, nous l'ajouterons à la fin du tableau children :

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

Maintenant, nous pouvons cliquer sur un produit et le supprimer à l'aide du bouton de suppression. Vous pouvez regarder dans le localforage du panneau de développement et vous en assurer.

Prenez l'application que vous avez créée dans les travaux dirigés des leçons précédentes. En utilisant le matériel de la leçon, ajoutez un bouton pour supprimer un étudiant, créez une nouvelle route pour la suppression, ajoutez-la dans les routes enfants. Assurez-vous que tout fonctionne.