Kuondoa Route katika React Router

Tumekuandaa kazi ya kuondoa data kutoka kwenye kuhifadhi. Sasa tujaongeze kwenye muundo wa ukurasa wa bidhaa kipande cha msimbo wenye kifungo cha kuondoa bidhaa. Tutaiongeza mara baada ya kifungo cha kuhariri. Tutavifunga fomu zote mbili zilizo na vifungo kwenye divi #control. Kisha katika action tuandike thamani 'delete'. Pia tutaongeza kidirisha cha mazungumzo, ili mtumiaji athibitishe tena - ana hamu ya kuondoa bidhaa hii:

<div id="control">
	<Form action="edit">
		<button type="submit">hariri</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Unataka kufuta bidhaa hii?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">futa</button>
	</Form>
</div>

Tutaongeza pia mitindo kwenye faili yetu ya CSS:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Sasa tutaunda route mpya ya kuondoa bidhaa. Ili kufanya hivyo fungua folda routes na uunde ndani yake faili delete.jsx. Tuongeze mara moja kuagiza redirect na kazi ya kuondoa deleteProduct:

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

Kisha, kwa kawaida, tunaandika kazi yetu action, ambayo itaita deleteProduct kwa kutumia id, na baada ya kufuta itatupeleka kwenye ukurasa wa kwanza:

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

Tunabaki tu kufungua main.jsx. Kuagiza action yetu:

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

Na kuweka thamani yake kwa kitendo action cha route ya kufuta. Kipengee cha route chenyewe tutakiweka mwisho wa safu children:

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

Sasa tunaweza kubonyeza bidhaa yoyote na kuiomba kwa kutumia kifungo cha kuondoa. Unaweza kuangalia kwenye localforage ya paneli ya wasanidi programu na kuhakikisha hilo.

Chukua programu iliyoundwa na wewe katika kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, ongeza kifungo cha kuondoa mwanafunzi, fanya route mpya ya kuondoa, uiongeze kwenye routes za watoto. Hakikisha kuwa yote inafanya kazi.