Brisanje poti v React Router

Funkcijo za brisanje podatkov iz shrambe smo napisali. Dajmo zdaj dodati v razporeditev strani izdelka kos kode z gumbom za brisanje izdelka. Dodajmo ga takoj za gumbom za urejanje. Ovojmo obe obrazci z gumbi v div #control. Nato v action zapišimo vrednost 'delete'. Prav tako bomo dodali pogovorno okno, da se uporabnik še enkrat potrdi - ali želi izbrisati izdelek:

<div id="control">
	<Form action="edit">
		<button type="submit">uredi</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Ali res želite izbrisati ta izdelek?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">izbriši</button>
	</Form>
</div>

Dodajmo tudi nekaj stilov v našo CSS datoteko:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

In zdaj bomo ustvarili novo pot za brisanje izdelka. Če želite to narediti, odprite mapo routes in v njej ustvarite datoteko delete.jsx. Dodajmo vanj takoj uvoz redirect in funkcijo za brisanje deleteProduct:

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

In nato, seveda, napišemo našo funkcijo action, ki bo klicala deleteProduct po id, in po brisanju nas preusmerila na domačo stran:

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

Ostaja nam le še, da odpremo main.jsx. Uvozimo naš action:

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

In ga nastavimo kot vrednost za metodo action poti za brisanje. Sam objekt poti bomo dodali na konec matrike children:

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

Zdaj lahko kliknemo na kateri koli izdelek in ga izbrišemo s pomočjo gumba za brisanje. Lahko pogledate v localforage razvojnega orodja in se prepričate o tem.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva lekcije dodajte gumb za brisanje študenta, ustvarite novo pot za brisanje, jo dodajte v podrejene poti. Prepričajte se, da vse deluje.