Penghapusan Laluan dalam React Router

Kami telah menulis fungsi untuk memadam data dari penyimpanan. Sekarang mari kita tambahkan pada hiasan halaman produk sebahagian kod dengan butang untuk memadam produk. Mari tambahkannya serta-merta selepas butang edit. Mari bungkus kedua-dua borang dengan butang dalam div #control. Kemudian dalam action tulis nilai 'delete'. Kami juga akan menambah kotak dialog supaya pengguna dapat mengesahkan sekali lagi - adakah dia mahu memadam produk ini:

<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 gaya pada fail CSS kami:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Dan sekarang kami akan mencipta laluan baharu untuk memadam produk. Untuk ini, buka folder routes dan buat fail di dalamnya delete.jsx. Mari tambahkan serta-merta import redirect dan fungsi penghapusan deleteProduct:

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

Kemudian, sudah tentu, tulis fungsi action kami, yang akan memanggil deleteProduct mengikut id, dan selepas penghapusan akan mengarahkan semula kami ke halaman utama :

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

Kami hanya perlu membuka main.jsx. Import action kami:

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

Dan tetapkannya sebagai nilai untuk kaedah action laluan penghapusan. Objek laluan itu sendiri akan kami tambahkan pada akhir array children:

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

Sekarang kami boleh klik pada mana-mana produk dan padamkannya menggunakan butang padam. Anda boleh melihat di localforage panel pembangun dan mengesahkannya.

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Menggunakan bahan pelajaran, tambah butang untuk memadam pelajar, buat laluan baharu untuk penghapusan, tambahkannya kepada laluan anak. Pastikan semuanya berfungsi.