Útvonal eltávolítása a React Routerban

Megírtuk az adatok törléséhez szükséges függvényt a tárolóból. Most adjuk hozzá a termék oldal elrendezéséhez a törlés gombját tartalmazó kódrészt. Helyezzük el közvetlenül a szerkesztés gombja után. Csomagoljuk mindkét gombot tartalmazó űrlapot egy #control div-be. Ezután az action értékébe írjuk be a 'delete' értéket. Hozzáadunk egy párbeszédablakot is, hogy a felhasználó megerősítse - biztosan törölni szeretné-e a terméket:

<div id="control">
	<Form action="edit">
		<button type="submit">szerkesztés</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Biztosan törölni szeretnéd ezt a terméket?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">törlés</button>
	</Form>
</div>

Adjunk hozzá néhány stílust a CSS fájlunkhoz:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Most pedig készítsünk egy új útvonalat a termék törléséhez. Ehnyomozd meg a routes mappát, és hozz létre benne egy delete.jsx fájlt. Adjuk hozzá azonnal az redirect importját és a törlő függvényt deleteProduct:

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

Majd természetesen megírjuk a action függvényünket, amely meghívja a deleteProduct függvényt a id alapján, és a törlés után átirányít a főoldalra:

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

Már csak meg kell nyitnunk a main.jsx fájlt. Importáljuk a action függvényünket:

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

És beállítjuk értéknek a action tulajdonságához a törlés útvonalán. Magát az útvonal objektumot a children tömb végére adjuk hozzá:

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

Most már rákattinthatunk valamelyik termékre, és törölhetjük azt a törlés gombbal. Beléphetsz a fejlesztői panel localforage-jébe, hogy meggyőződj erről.

Vedd elő azokat az alkalmazásokat, amelyeket az előző leckék feladataihoz készítettél. A lecke anyagát felhasználva adj hozzá törlés gombot a diák törléséhez, készíts új útvonalat a törléshez, add hozzá azt a gyermek útvonalakhoz. Győződj meg róla, hogy minden működik.