Xóa tuyến đường trong React Router

Chúng ta đã viết hàm để xóa dữ liệu khỏi kho lưu trữ. Bây giờ hãy thêm vào bố cục trang sản phẩm một đoạn mã với nút để xóa sản phẩm. Chúng ta sẽ thêm nó ngay sau nút chỉnh sửa. Hãy bọc cả hai biểu mẫu có nút trong một div #control. Sau đó, trong action, hãy đặt giá trị là 'delete'. Chúng ta cũng sẽ thêm một hộp thoại để người dùng xác nhận lại một lần nữa - liệu họ có muốn xóa sản phẩm này không:

<div id="control">
	<Form action="edit">
		<button type="submit">edit</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('Bạn có muốn xóa sản phẩm này không?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">delete</button>
	</Form>
</div>

Hãy thêm một số kiểu vào tệp CSS của chúng ta:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

Bây giờ, chúng ta sẽ tạo một tuyến đường mới để xóa sản phẩm. Để làm điều này, hãy mở thư mục routes và tạo trong đó một tệp delete.jsx. Chúng ta sẽ thêm ngay lập tức việc nhập redirect và hàm xóa deleteProduct:

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

Và sau đó, tất nhiên, chúng ta viết hàm action của mình, sẽ gọi deleteProduct theo id, và sau khi xóa sẽ chuyển hướng chúng ta đến trang chủ :

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

Chúng ta chỉ còn việc mở main.jsx, nhập action của chúng ta:

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

Và đặt nó làm giá trị cho phương thức action của tuyến đường xóa. Bản thân đối tượng tuyến đường chúng ta sẽ thêm vào cuối mảng children:

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

Bây giờ chúng ta có thể nhấp vào một sản phẩm nào đó và xóa nó bằng nút xóa. Bạn có thể kiểm tra trong localforage của bảng điều khiển dành cho nhà phát triển để xác nhận điều này.

Hãy lấy ứng dụng mà bạn đã tạo trong các bài tập của các bài học trước. Sử dụng tài liệu của bài học, hãy thêm nút để xóa sinh viên, tạo một tuyến đường mới để xóa, thêm nó vào các tuyến đường con. Hãy đảm bảo rằng mọi thứ hoạt động.