Maršruta dzēšana React Router

Funkciju datu dzēšanai no krātuves mēs uzrakstījām. Tagad pievienosim produkta lapas izkārtojumā koda daļu ar dzēšanas pogu produktam. Pievienosim to uzreiz pēc rediģēšanas pogas. Ietīsim abas formas ar pogām div#control. Tad action ierakstīsim vērtību 'delete'. Arī mēs pievienosim dialoga logu, lai lietotājs vēlreiz apstiprinātu - vai viņš vēlas dzēst produktu:

<div id="control">
	<Form action="edit">
		<button type="submit">rediģēt</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Vai tiešām vēlaties dzēst šo produktu?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">dzēst</button>
	</Form>
</div>

Pievienosim arī stilus mūsu CSS failam:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Un tagad mēs izveidosim jaunu maršrutu produkta dzēšanai. Lai to izdarītu, atveriet mapi routes un izveidojiet tajā failu delete.jsx. Pievienosim tajā uzreiz importēt redirect un dzēšanas funkciju deleteProduct:

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

Un tad, protams, rakstām mūsu funkciju action, kas izsauks deleteProduct pēc id, un pēc dzēšanas novirzīs mūs uz sākuma lapu:

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

Mums atliek tikai atvērt main.jsx. Importēt mūsu action:

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

Un iestatīt to kā vērtību metodei action dzēšanas maršrutam. Pašu maršruta objektu mēs pievienosim masīva children beigās:

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

Tagad mēs varam noklikšķināt uz kāda produkta un dzēst to, izmantojot pogu dzēšanai. Varat ieskatīties panelī localforage izstrādātāju un par to pārliecināties.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, pievienojiet pogu studenta dzēšanai, izveidojiet jaunu maršrutu dzēšanai, pievienojiet to pakārtotajos maršrutos. Pārliecinieties, ka viss strādā.