Ștergerea rutei în React Router

Am scris funcția pentru ștergerea datelor din depozit. Să adăugăm acum în markup-ul paginii produsului o bucată de cod cu un buton pentru ștergerea produsului. Să o adăugăm imediat după butonul de editare. Să împachetăm ambele formulare cu butoane într-un div #control. Apoi în action vom scrie valoarea 'delete'. De asemenea, vom adăuga o fereastră de dialog pentru ca utilizatorul să confirme încă o dată - dacă vrea să șteargă produsul:

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

Să adăugăm și niște stiluri în fișierul nostru CSS:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Iar acum vom crea o nouă rută pentru ștergerea produsului. Pentru aceasta deschideți directorul routes și creați în el fișierul delete.jsx. Să adăugăm în el imediat importul redirect și funcția de ștergere deleteProduct:

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

Și apoi, în mod natural, scriem funcția noastră action, care va chema deleteProduct după id, iar după ștergere ne va redirecționa către pagina principală:

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

Ne rămâne doar să deschidem main.jsx. Să importăm action-ul nostru:

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

Și să îl setăm ca valoare pentru metoda action a rutei de ștergere. Însuși obiectul rutei îl vom adăuga la sfârșitul array-ului children:

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

Acum putem face clic pe un produs și să îl ștergem cu ajutorul butonului de ștergere. Puteți arunca o privire în panoul localforage al dezvoltatorului și să vă convingeți de acest lucru.

Luați aplicația creată de dvs. în sarcinile din lecțiile trecute. Folosind materialele lecției, adăugați un buton pentru ștergerea studentului, creați o nouă rută pentru ștergere, adăugați-o în rutele copil. Asigurați-vă că totul funcționează.