Verwydering van 'n roete in React Router

Ons het die funksie geskryf om data uit die berging te verwyder. Kom ons voeg nou aan die bladsy se uitleg 'n stuk kode by met 'n knoppie om die produk te verwyder. Laat ons dit direk na die wysigingsknoppie byvoeg. Ons sal albei vorms met knoppies in 'n div #control verpak. Dan in action skryf ons die waarde 'delete'. Ons sal ook 'n dialoogvenster byvoeg sodat die gebruiker weer kan bevestig - of hy die produk wil verwyder:

<div id="control">
	<Form action="edit">
		<button type="submit">wysig</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Wil jy hierdie produk verwyder?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">verwyder</button>
	</Form>
</div>

Kom ons voeg ook 'n bietjie styl by ons CSS lêer:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

En nou sal ons 'n nuwe roete skep vir die verwydering van die produk. Om dit te doen, maak die gids routes oop en skep die lêer delete.jsx daarin. Kom ons voeg dadelik die invoer van redirect en die verwyderingsfunksie deleteProduct by:

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

En dan, natuurlik, skryf ons ons funksie action, wat deleteProduct volgens die id sal oproep, en na verwydering sal dit ons na die hoof blad herlei:

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

Al wat oorbly is om main.jsx oop te maak. Voer ons action in:

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

En stel dit as die waarde vir die action metode van die verwyderingsroete. Die roete-voorwerp self sal ons aan die einde van die skikking children byvoeg:

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

Nou kan ons op enige produk klik en dit met die knoppie verwyder. Jy kan na die localforage van die ontwikkelaarpaneel gaan en daarvan oortuig raak.

Neem die toepassing wat jy in opdragte van vorige lesse geskep het. Gebruik die materiaal van die les, voeg 'n knoppie by om die student te verwyder, maak 'n nuwe roete vir verwydering, voeg dit by die kinderroetes. Maak seker dat alles werk.