Brisanje rute u React Routeru

Funkciju za brisanje podataka iz skladišta smo napisali. Hajde sada da dodamo u izgled stranice proizvoda deo koda sa dugmetom za brisanje proizvoda. Dodajmo ga odmah posle dugmeta za izmenu. Obuhvatimo obe forme sa dugmadima u div #control. Zatim u action upišemo vrednost 'delete'. Takođe ćemo dodati dijalog prozor, da bi korisnik još jednom potvrdio - da li želi da izbriše proizvod:

<div id="control">
	<Form action="edit">
		<button type="submit">izmeni</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Da li želite da izbrišete ovaj proizvod?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">obriši</button>
	</Form>
</div>

Dodajmo takođe nekoliko stilova u naš CSS fajl:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

A sada ćemo kreirati novu rutu za brisanje proizvoda. Za to otvorite fasciklu routes i napravite u njoj fajl delete.jsx. Dodajmo u njega odmah import redirect i funkcije za brisanje deleteProduct:

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

A zatim, prirodno, pišemo našu funkciju action, koja će pozivati deleteProduct preko id, a nakon brisanja će nas preusmeriti na početnu stranicu:

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

Ostaje nam samo da otvorimo main.jsx. Importujemo naš action:

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

I postavimo ga kao vrednost za metod action rute za brisanje. Sam objekat rute ćemo dodati na kraj niza children:

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

Sada možemo da kliknemo na neki proizvod i da ga obrišemo pomoću dugmeta za brisanje. Možete da pogledate u localforage panela za razvoj i uverite se u to.

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći materijale lekcije, dodajte dugme za brisanje studenta, napravite novu rutu za brisanje, dodajte je u podrute. Uverite se da sve radi.