Maršruto pašalinimas React Router

Mes parašėme funkciją duomenų šalinimui iš saugyklos. Dabar į produkto puslapio išdėstymą pridėkime kodo fragmentą su mygtuku produkto pašalinimui. Pridėkime jį iškart po redagavimo mygtuko. Apgaubkime abi formules su mygtukais į div #control. Tada į action įrašykime reikšmę 'delete'. Taip pat pridėsime dialogą, kad vartotojas dar kartą patvirtintų - ar jis nori ištrinti produktą:

<div id="control">
	<Form action="edit">
		<button type="submit">redaguoti</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Ar norite ištrinti šį produktą?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">ištrinti</button>
	</Form>
</div>

Pridėkime ir šiek tiek stilių į mūsų CSS failą:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

O dabar sukursime naują maršrutą produkto pašalinimui. Tam atidarykite katalogą routes ir jame sukurkite failą delete.jsx. Pridėkime į jį iškart importą redirect ir pašalinimo funkciją deleteProduct:

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

Ir tada, žinoma, rašome mūsų funkciją action, kuri iškvies deleteProduct pagal id, o po ištrynimo nukreips mus į pagrindinį puslapį:

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

Mums belieka tik atidaryti main.jsx. Importuoti mūsų action:

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

Ir nustatyti jį kaip reikšmę metodui action šalinimo maršruto. Patį maršruto objektą pridėsime į masyvo children pabaigą:

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

Dabar mes galime paspausti bet kurį produktą ir jį ištrinti naudojant mygtuką pašalinimui. Galite pažiūrėti į "localforage" naršyklės kūrėjo skydelyje ir tuo įsitikinti.

Paimkite programą, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, pridėkite mygtuką studento pašalinimui, sukurkite naują maršrutą pašalinimui, pridėkite jį į antrinius maršrutus. Įsitikinkite, kad viskas veikia.