Διαγραφή Διαδρομής στο React Router

Γράψαμε τη λειτουργία για διαγραφή δεδομένων από το αποθηκευτικό χώρο. Ας προσθέσουμε τώρα στη σήμανση της σελίδας του προϊόντος ένα τμήμα κώδικα με ένα κουμπί για τη διαγραφή του προϊόντος. Ας το προσθέσουμε αμέσως μετά το κουμπί επεξεργασίας. Θα τυλίξουμε και τις δύο φόρμες με κουμπιά σε ένα div #control. Στη συνέχεια, στο action θα γράψουμε την τιμή 'delete'. Επίσης, θα προσθέσουμε ένα παράθυρο διαλόγου ώστε ο χρήστης να επιβεβαιώσει ξανά - αν θέλει να διαγράψει το προϊόν:

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

Ας προσθέσουμε επίσης μερικά στυλ στο αρχείο CSS μας:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Και τώρα θα δημιουργήσουμε μια νέα διαδρομή για τη διαγραφή του προϊόντος. Για να το κάνετε αυτό, ανοίξτε τον φάκελο routes και δημιουργήστε σε αυτόν το αρχείο delete.jsx. Ας προσθέσουμε αμέσως την εισαγωγή redirect και της λειτουργίας διαγραφής deleteProduct:

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

Και στη συνέχεια, φυσικά, γράφουμε τη λειτουργία action μας, η οποία θα καλεί τη deleteProduct βάσει του id, και μετά τη διαγραφή θα μας ανακατευθύνει στην κύρια σελίδα:

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

Απομένει μόνο να ανοίξουμε το main.jsx. Να εισάγουμε τη action μας:

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

Και να ορίσουμε την τιμή της για τη μέθοδο action της διαδρομής διαγραφής. Το αντικείμενο της διαδρομής θα το προσθέσουμε στο τέλος του πίνακα children:

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

Τώρα μπορούμε να κάνουμε κλικ σε κάποιο προϊόν και να το διαγράψουμε χρησιμοποιώντας το κουμπί διαγραφής. Μπορείτε να κοιτάξετε στο localforage του πίνακα εργαλείων του προγραμματιστή και να το επαληθεύσετε.

Πάρτε την εφαρμογή που δημιουργήσατε στα αναθέσεις των προηγούμενων μαθημάτων. Χρησιμοποιώντας τα υλικά του μαθήματος, προσθέστε ένα κουμπί για τη διαγραφή του μαθητή, δημιουργήστε μια νέα διαδρομή για διαγραφή, προσθέστε την στις θυγατρικές διαδρομές. Βεβαιωθείτε ότι όλα λειτουργούν.