Odstránenie trasy v React Router

Funkciu na odstránenie údajov z úložiska sme napísali. Poďme teraz pridať do rozloženia stránky produktu časť kódu s tlačidlom na odstránenie produktu. Pridajme ju hneď po tlačidle úpravy. Obalme obidva formuláre s tlačidlami do div #control. Potom do action zapíšeme hodnotu 'delete'. Tiež pridáme dialógové okno, aby sa užívateľ ešte raz potvrdil - chce li odstrániť produkt:

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

Pridajme tiež štýly do nášho CSS súboru:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

A teraz vytvoríme novú trasu pre odstránenie produktu. Preto otvorte priečinok routes a vytvorte v ňom súbor delete.jsx. Pridajme do neho hneď import redirect a funkcie odstránenia deleteProduct:

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

A potom, samozrejme, napíšeme našu funkciu action, ktorá bude volať deleteProduct podľa id, a po odstránení presmeruje nás na hlavnú stránku:

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

Zostáva nám už len otvoriť main.jsx. Importovať našu action:

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

A nastaviť ju ako hodnotu pre metódu action trasy odstránenia. Samotný objekt trasy pridáme na koniec poľa children:

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

Teraz môžeme kliknúť na nejaký produkt a odstrániť ho pomocou tlačidla odstránenia. Môžete nahliadnuť do localforage panela vývojára a presvedčiť sa o tom.

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Použitím materiálov lekcie pridajte tlačidlo na odstránenie študenta, vytvorte novú trasu pre odstránenie, pridajte ju do podriadených trás. Uistite sa, že všetko funguje.