React Router-এ ডেটা যোগ করা

গত কয়েকটি পাঠে আমরা একটি লোডার প্রস্তুত করেছি এবং স্টোর থেকে একটি নির্দিষ্ট রুট অনুসারে ডেটা আনলোড করেছি। এখন আমাদের অ্যাপ্লিকেশনের উদাহরণ ব্যবহার করে জেনে নেওয়া যাক কিভাবে একটি নতুন পণ্য যোগ করতে হয় এবং এর ডেটা স্টোরে লিখতে হয়।

ফাইল root.jsx খুলুন এবং nav-এর আগে একটি ফর্ম ট্যাগে রেখে একটি নতুন পণ্য যোগ করার বাটন যোগ করুন এখন বাটন এবং আমাদের তালিকাটিকে আরেকটি div-তে #menu দিয়ে র‍্যাপ করুন। লেআউট এখন এইরকম দেখাবে:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">পণ্য যোগ করুন</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Unnamed</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>এখানে কোন পণ্য নেই ...</i>
			</p>
			)}
		</div>

		<div id="product">
			<Outlet />
		</div>
	</div>
);

যদি আমরা এখন ডেভেলপার প্যানেলের 'নেটওয়ার্ক' ট্যাবে যাই, এবং তারপর আমাদের বাটনে ক্লিক করি, তাহলে আমরা সার্ভারে একটি ত্রুটিপূর্ণ অনুরোধ দেখতে পাব। React Router ব্যবহার করে আমরা আবার ক্লায়েন্ট সাইড রাউটিং ব্যবহার করব, সার্ভারে অনুরোধ না করে।

এর জন্য আসুন form ট্যাগটি React Router-এর Form কম্পোনেন্ট দিয়ে পরিবর্তন করি। প্রথমে Form ইম্পোর্ট যোগ করি:

import { Form } from 'react-router-dom';

এখন কোডের স্নিপেটে form ট্যাগগুলি প্রতিস্থাপন করুন:

<Form method="post">
	<button type="submit">পণ্য যোগ করুন</button>
</Form>

আমাদের অ্যাপ্লিকেশনটি রিলোড করুন এবং আবার ডেভেলপার প্যানেল দেখুন। পণ্য যোগ করার বাটনে ক্লিক করুন - এখন সার্ভারে কোন অনুরোধ নেই (এখনই ত্রুটির দিকে মনোযোগ দেবেন না)।

আপনি গত পাঠগুলোর অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, Root ফাংশনের মার্কআপ সংশোধন করুন, form ট্যাগে একজন শিক্ষার্থী যোগ করার জন্য একটি বাটন যোগ করুন। নিশ্চিত করুন যে বাটন ক্লিক করলে সার্ভারে একটি অনুরোধ হয়।

এবং এখন form ট্যাগটি, Form কম্পোনেন্ট দিয়ে প্রতিস্থাপন করুন। নিশ্চিত করুন যে শিক্ষার্থী যোগ করার বাটনে ক্লিক করলে সার্ভারে কোন অনুরোধ পাঠানো হয় না।