React Router-এ রুট মুছে ফেলা

স্টোরেজ থেকে ডেটা মুছে ফেলার ফাংশন আমরা লিখেছি। আসুন এখন পণ্যের পৃষ্ঠার মার্কআপে একটি মুছে ফেলার বাটন সহ কোডের একটি অংশ যোগ করি। এডিট বাটনের পরেই এটি যোগ করি। উভয় বাটন ফর্মকে একটি #control div-তে মোড়ক করি। তারপর 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 ফাংশন লিখি, যা id অনুসারে deleteProduct কে কল করবে, এবং মুছে ফেলার পর আমাদের মূল পৃষ্ঠায় পুনঃনির্দেশিত করবে:

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-এ তাকিয়ে নিশ্চিত হতে পারেন।

আপনি পূর্ববর্তী পাঠের অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, ছাত্র মুছে ফেলার জন্য একটি বাটন যোগ করুন, মুছে ফেলার জন্য একটি নতুন রুট তৈরি করুন, এটিকে চাইল্ড রাউটে যোগ করুন। নিশ্চিত হন যে সবকিছু কাজ করছে।