การลบเส้นทางใน React Router

เราได้เขียนฟังก์ชันสำหรับลบข้อมูลจาก ที่เก็บข้อมูลแล้ว มาดูกันตอนนี้ เพิ่มโค้ดส่วนที่มีปุ่มสำหรับลบ สินค้าเข้าไปในหน้าของหน้ารายการสินค้า กันเถอะ เพิ่มมันเข้าไปทันที หลังจากปุ่มแก้ไข เราจะห่อหุ้ม ฟอร์มทั้งสองที่มีปุ่มไว้ใน div #control จากนั้นใน action ให้กำหนดค่าเป็น 'delete' นอกจากนี้เราจะเพิ่มหน้าต่าง โต้ตอบ เพื่อให้ผู้ใช้ยืนยันอีกครั้ง - ว่า เขาต้องการลบสินค้านี้หรือไม่:

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

มาเพิ่มสไตล์เข้าไปในไฟล์ CSS ของเราด้วย:

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

และตอนนี้เราจะสร้างเส้นทางใหม่สำหรับ การลบสินค้า เปิด โฟลเดอร์ routes และสร้างไฟล์ delete.jsx ไว้ในนั้น เพิ่มการนำเข้า redirect และฟังก์ชันลบ deleteProduct เข้าไปทันที:

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

จากนั้น แน่นอน, เราเขียน ฟังก์ชัน action ของเรา ซึ่งจะ เรียก deleteProduct ด้วย id, และหลังจากการลบเสร็จสิ้นจะนำทางเราไปยังหน้า หลัก:

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

ที่เหลือคือเปิดไฟล์ main.jsx นำเข้า action ของเรา:

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

และตั้งค่าเป็นค่าสำหรับ คุณสมบัติ action ของเส้นทางลบ เรา จะเพิ่มอ็อบเจกต์เส้นทางนั้นเข้าไปที่ท้ายอาร์เรย์ children:

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

ตอนนี้เราสามารถคลิกที่สินค้า ใดๆ และลบมันโดยใช้ปุ่ม ลบได้แล้ว คุณสามารถดูใน localforage ของ Developer Tools และตรวจสอบได้

นำแอปพลิเคชันที่คุณสร้างขึ้นใน แบบฝึกหัดของบทเรียนก่อนหน้ามา ใช้ประโยชน์จากเนื้อหาของบทเรียน เพิ่มปุ่มสำหรับ ลบนักเรียน สร้างเส้นทางใหม่ สำหรับการลบ เพิ่มมัน เข้าไปในเส้นทางลูก ตรวจสอบให้แน่ใจว่าทุกอย่าง ทำงานได้