Выдаленне маршруту ў React Router

Функцыю для выдалення даных з сховішча мы напісалі. Давайте цяпер дадамо ў верстку старонкі прадукту кавалак кода з кнопкай для выдалення прадукту. Дадамо яго адразу пасля кнопкі рэдагавання. Абнясём абодве формы з кнопкамі ў дыў #control. Затым у action запiшам значэнне '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 панэлі распрацоўніка і пераканацца ў гэтым.

Вазьміце дадатак, створанае вамі ў заданнях да мінулых урокаў. Карыстаючыся матэрыяламі ўрока, дадайце кнопку для выдалення студэнта, зрабіце новы маршрут для выдалення, дадайце яго ў даччыныя маршруты. Пераканайцеся, што ўсё працуе.