Изтриване на маршрут в React Router

Функцията за изтриване на данни от хранилището ние написахме. Нека сега добавим в оформлението на страницата на продукта част от код с бутон за изтриване на продукта. Ще го добавим веднага след бутона за редактиране. Ще обгърнем и двете форми с бутони в див #control. След това в action ще запишем стойност 'delete'. Също така ще добавим диалогов прозорец, за да може потребителят да потвърди още веднъж - дали иска да изтрие продукта:

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

Добавете също и стилове в нашия CSS файл:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

А сега ще създадем нов маршрут за изтриване на продукта. За това отворете папката routes и създайте в нея файл delete.jsx. Нека добавим в него веднага импорт на redirect и функцията за изтриване deleteProduct:

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

И след това, естествено, пишем нашата функция action, която ще извика deleteProduct по id, а след изтриването ще ни пренасочи към началната страница:

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

Остава само да отворим main.jsx. Да импортираме нашия action:

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

И да го зададем като стойност за метода action на маршрута за изтриване. Самият обект на маршрута ще добавим в края на масива children:

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

Сега можем да кликнем върху някой продукт и да го изтрием с помощта на бутона за изтриване. Можете да погледнете в localforage панела на разработчика и да се убедите в това.

Вземете приложението, създадено от вас в задачите към предишните уроци. Използвайки материалите от урока, добавете бутон за изтриване на студент, направете нов маршрут за изтриване, добавете го в дъщерните маршрути. Уверете се, че всичко работи.