მარშრუტის წაშლა React Router-ში

ჩვენ დავწერეთ ფუნქცია მონაცემების წასაშლელად საცავიდან. მოდით ახლა დავამატოთ პროდუქტის გვერდის ვერსტკაში კოდის ნაწილი პროდუქტის წასაშლელ ღილაკთან ერთად. დავამატოთ იგი შეცვლის ღილაკის შემდეგ. ორივე ფორმას ღილაკებთან ერთად შევკრიბოთ დივში #control. შემდეგ action-ში ჩავწეროთ მნიშვნელობა 'delete'. ასევე დავამატოთ დიალოგური ფანჯარა, რათა მომხმარებელმა კიდევ ერთხელ დაადასტუროს - უნდა თუ არა პროდუქტის წაშლა:

<div id="control">
	<Form action="edit">
		<button type="submit">რედაქტირება</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('გსურთ ამ პროდუქტის წაშლა?')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">წაშლა</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-ში დეველოპერის პანელში და დარწმუნდეთ ამაში.

აიღეთ თქვენს მიერ წინა გაკვეთილების დავალებებში შექმნილი აპლიკაცია. გაკვეთილის მასალების გამოყენებით, დაამატეთ ღილაკი სტუდენტის წასაშლელად, შექმენით ახალი მარშრუტი წაშლისთვის, დაამატეთ იგი შვილობილ მარშრუტებში. დარწმუნდით, რომ ყველაფერი მუშაობს.