Бришење на рута во 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('Дали сакате да го избришете овој производ?')) {
				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 на панелот за разработка и да се уверите во тоа.

Земете ја апликацијата што ја создадовте во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, додадете копче за бришење на студент, направете нова рута за бришење, додадете ја во деца рути. Проверете дали сè работи.