Eliminación de ruta en React Router

Ya hemos escrito la función para eliminar datos del almacenamiento. Ahora agreguemos a la maquetación de la página de producto un fragmento de código con un botón para eliminar el producto. Agreguémoslo justo después del botón de edición. Envolvamos ambos formularios con botones en un div #control. Luego en action escribamos el valor 'delete'. También agregaremos una ventana de diálogo para que el usuario confirme nuevamente - ¿quiere eliminar el producto?:

<div id="control">
	<Form action="edit">
		<button type="submit">edit</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('¿Quieres eliminar este producto?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">delete</button>
	</Form>
</div>

Agreguemos también algunos estilos a nuestro archivo CSS:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Y ahora crearemos una nueva ruta para eliminar el producto. Para ello, abra la carpeta routes y cree en ella el archivo delete.jsx. Agreguemos inmediatamente la importación de redirect y la función de eliminación deleteProduct:

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

Y luego, naturalmente, escribimos nuestra función action, que llamará a deleteProduct por id, y después de la eliminación nos redirigirá a la página principal:

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

Solo nos queda abrir main.jsx, importar nuestra action:

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

Y establecerla como valor para el método action de la ruta de eliminación. El objeto de ruta mismo lo agregaremos al final del array children:

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

Ahora podemos hacer clic en algún producto y eliminarlo usando el botón de eliminación. Puede revisar en el panel de desarrollo de localforage y comprobarlo.

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Usando los materiales de la lección, agregue un botón para eliminar un estudiante, cree una nueva ruta para eliminación, agréguela a las rutas hijas. Asegúrese de que todo funcione.