React Router-এ আরও একটি রুট যোগ করা

আমাদের একটি মূল রুট আছে যা মূল পৃষ্ঠায় নিয়ে যায়, যেখানে আমাদের পণ্যের জন্য লিঙ্ক আছে। এখন আসুন আরও একটি রুট যোগ করি, যাতে লিঙ্কগুলির একটিতে ক্লিক করলে আমাদের পণ্যের পৃষ্ঠা প্রদর্শিত হয়, এবং একটি ত্রুটি পৃষ্ঠা নয়।

প্রথমে আসুন আমরা আমাদের অ্যাপ্লিকেশনটি খুলি, যেটি আমরা আগের পাঠে তৈরি করেছিলাম এবং routes ফোল্ডারে product.jsx ফাইল তৈরি করি। এতে Product কম্পোনেন্ট তৈরি করি:

function Product() {}

export default Product;

এখন Product-এর ভিতরে product অবজেক্ট তৈরি করি, name, cost এবং amount বৈশিষ্ট্য সহ, এখনকার জন্য এগুলি কিছু স্থির মান হবে:

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

এবং পণ্যের পৃষ্ঠায় আমরা যথাক্রমে তার নাম, মূল্য এবং পরিমাণ প্রদর্শন করব:

return (
	<div>
		<h2>পণ্যের পৃষ্ঠা</h2>
		<p>নাম: {product.name}</p>
		<p>মূল্য: {product.cost}</p>
		<p>পরিমাণ: {product.amount}</p>
	</div>
);

Product কম্পোনেন্টটি main.jsx ফাইলে ইম্পোর্ট করতে ভুলবেন না:

import Product from './routes/product';

এবং, শেষ পর্যন্ত, আমাদের অ্যাপ্লিকেশনে আরও একটি রুট যোগ করি, এটি মূল রুটের পরেই করি। পথ হিসাবে 'products/:productId' নির্দিষ্ট করি, এবং প্রদর্শনের জন্য এলিমেন্ট হিসাবে Product কম্পোনেন্টটি ব্যবহার করি:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

এবং এখন অ্যাপ্লিকেশন চালু করি, লিঙ্কগুলিতে ক্লিক করি এবং পণ্যের পৃষ্ঠায় পৌঁছে যাই (এখন পর্যন্ত এটি সকল লিঙ্কের জন্য একই), এবং ত্রুটি পৃষ্ঠায় নয়।

আপনি আগের পাঠের অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, একইভাবে student.jsx ফাইল তৈরি করুন, ছাত্রের পৃষ্ঠায় তার নাম, উপাধি, ভর্তির বছর এবং বিশেষায়ন প্রদর্শিত হোক। main.jsx ফাইলে ছাত্রের পৃষ্ঠার জন্য একটি নতুন রুট যোগ করুন, path-এর মান 'students/:studentId' সেট করুন। নিশ্চিত হন যে লিঙ্কগুলিতে ক্লিক করলে আপনি এখন ছাত্রের পৃষ্ঠায় পৌঁছান।