Брисање руте у Реацт Роутеру

Функцију за брисање података из складишта смо написали. Хајде сада да додамо у верстку странице производа део кода са дугметом за брисање производа. Додајмо га одмах после дугмета за уређивање. Омотајмо оба облика са дугмадима у див #control. Затим у action упишемо вредност 'delete'. Такође ћемо додати дијалог прозор, да би корисник још једном потврдио - да ли жели да обрише производ:

<div id="control">
	<Form action="edit">
		<button type="submit">уреди</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Да ли желите да обришете овај производ?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">обриши</button>
	</Form>
</div>

Додајмо и неких стилова у наш ЦСС фајл:

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 панели програмера и убедити се у томе.

Узмите апликацију, коју сте креирали у задацима за претходне лекције. Користећи материјал лекције, додајте дугме за брисање студента, направите нову руту за брисање, додајте је у дечје руте. Уверите се да све функционише.