Löschen einer Route in React Router

Die Funktion zum Löschen von Daten aus dem Speicher haben wir geschrieben. Lasst uns jetzt im Layout der Produktseite einen Codeabschnitt mit einer Schaltfläche zum Löschen des Produkts hinzufügen. Wir fügen ihn direkt nach der Bearbeitungsschaltfläche hinzu. Wir werden beide Formulare mit Schaltflächen in ein Div #control einpacken. Dann schreiben wir in action den Wert 'delete'. Außerdem fügen wir ein Dialogfeld hinzu, damit der Benutzer noch einmal bestätigen muss - ob er das Produkt wirklich löschen möchte:

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

Fügen wir auch noch etwas Stil in unsere CSS-Datei:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Und jetzt erstellen wir eine neue Route zum Löschen des Produkts. Öffnen Sie dazu den Ordner routes und erstellen Sie darin die Datei delete.jsx. Fügen wir sofort den Import von redirect und der Löschfunktion deleteProduct hinzu:

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

Und dann schreiben wir natürlich unsere action-Funktion, die deleteProduct anhand der id aufruft und uns nach dem Löschen zur Hauptseite weiterleitet:

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

Jetzt müssen wir nur noch main.jsx öffnen. Unsere action importieren:

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

Und sie als Wert für die action-Methode der Löschroute setzen. Das Route-Objekt selbst fügen wir am Ende des Arrays children hinzu:

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

Jetzt können wir auf ein beliebiges Produkt klicken und es mit der Löschen-Schaltfläche entfernen. Sie können in den localforage der Entwicklertools nachsehen und sich davon überzeugen.

Nehmen Sie die Anwendung, die Sie in den Aufgaben der vorherigen Lektionen erstellt haben. Verwenden Sie die Materialien der Lektion, fügen Sie eine Schaltfläche zum Löschen eines Studenten hinzu, erstellen Sie eine neue Route für das Löschen und fügen Sie sie den untergeordneten Routen hinzu. Stellen Sie sicher, dass alles funktioniert.