Menghapus Rute di React Router

Fungsi untuk menghapus data dari penyimpanan telah kita tulis. Sekarang mari tambahkan ke tata letak halaman produk sepotong kode dengan tombol untuk menghapus produk. Tambahkan segera setelah tombol edit. Bungkus kedua form dengan tombol dalam div #control. Kemudian dalam action tulis nilai 'delete'. Kami juga akan menambahkan kotak dialog agar pengguna dapat mengonfirmasi lagi - apakah mereka ingin menghapus produk:

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

Tambahkan juga beberapa gaya ke file CSS kami:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Dan sekarang kita akan membuat rute baru untuk menghapus produk. Untuk melakukan ini, buka folder routes dan buat file di dalamnya delete.jsx. Mari tambahkan impor redirect dan fungsi penghapusan deleteProduct:

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

Kemudian, tentu saja, tulis fungsi action kami, yang akan memanggil deleteProduct berdasarkan id, dan setelah penghapusan akan mengarahkan kami ke beranda halaman:

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

Kita tinggal membuka main.jsx. Impor action kami:

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

Dan mengaturnya sebagai nilai untuk metode action dari rute penghapusan. Objek rute itu sendiri akan kita tambahkan di akhir array children:

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

Sekarang kita dapat mengklik suatu produk dan menghapusnya menggunakan tombol hapus. Anda dapat melihat ke localforage pada panel pengembang dan memastikannya.

Ambil aplikasi yang Anda buat di tugas pelajaran sebelumnya. Dengan menggunakan materi pelajaran, tambahkan tombol untuk menghapus siswa, buat rute baru untuk penghapusan, tambahkan ke rute anak. Pastikan semuanya berfungsi.