Usuwanie trasy w React Router

Funkcję do usuwania danych z magazynu napisaliśmy. Teraz dodajmy do kodu strony produktu fragment z przyciskiem do usuwania produktu. Dodajmy go zaraz po przycisku edycji. Opakujmy oba formularze z przyciskami w div #control. Następnie w action wpiszmy wartość 'delete'. Dodamy również okno dialogowe, aby użytkownik mógł potwierdzić - czy na pewno chce usunąć produkt:

<div id="control">
	<Form action="edit">
		<button type="submit">edit</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Czy na pewno chcesz usunąć ten produkt?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">delete</button>
	</Form>
</div>

Dodajmy również stylów do naszego pliku CSS:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

A teraz utworzymy nową trasę do usuwania produktu. W tym celu otwórz folder routes i utwórz w nim plik delete.jsx. Dodajmy do niego od razu import redirect i funkcji usuwania deleteProduct:

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

A następnie, naturalnie, piszemy naszą funkcję action, która będzie wywoływać deleteProduct po id, a po usunięciu przekieruje nas na stronę główną:

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

Pozostało nam tylko otworzyć main.jsx. Zaimportować naszą action:

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

I ustawić ją jako wartość dla metody action trasy usuwania. Sam obiekt trasy dodamy na koniec tablicy children:

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

Teraz możemy kliknąć na dowolny produkt i usunąć go za pomocą przycisku usuwania. Możesz zajrzeć do localforage panelu deweloperskiego i się o tym przekonać.

Weź aplikację stworzoną przez Ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, dodaj przycisk do usuwania studenta, utwórz nową trasę do usuwania, dodaj ją do tras podrzędnych. Upewnij się, że wszystko działa.