Route verwijderen in React Router

We hebben de functie geschreven om gegevens uit de opslag te verwijderen. Laten we nu op de productpagina een stuk code toevoegen met een knop om het product te verwijderen. We voegen het meteen na de bewerkknop toe. We wikkelen beide formulieren met knoppen in een div #control. Vervolgens schrijven we in action de waarde 'delete'. We voegen ook een dialoogvenster toe, zodat de gebruiker nogmaals kan bevestigen - of hij het product wil verwijderen:

<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>

Laten we ook wat stijl toevoegen aan ons CSS-bestand:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

En nu gaan we een nieuwe route maken voor het verwijderen van het product. Open hiervoor de map routes en maak daarin het bestand delete.jsx aan. Laten we meteen redirect en de verwijderfunctie deleteProduct importeren:

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

En dan, natuurlijk, schrijven we onze functie action, die deleteProduct zal aanroepen op basis van id, en na verwijdering ons doorverwijst naar de homepage:

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

Het enige dat ons nog rest is om main.jsx te openen. Importeer onze action:

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

En stel deze in als waarde voor de methode action van de verwijderroute. Het route-object zelf voegen we toe aan het einde van de array children:

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

Nu kunnen we op een willekeurig product klikken en het verwijderen met behulp van de verwijderknop. Je kunt in de localforage van het ontwikkelpaneel kijken om dit te verifiëren.

Neem de applicatie die je in opdrachten bij eerdere lessen hebt gemaakt. Gebruikmakend van de lesmaterialen, voeg een knop toe om een student te verwijderen, maak een nieuwe route voor verwijdering, voeg deze toe aan de onderliggende routes. Zorg ervoor dat alles werkt.