Redux-এ ব্রাউজারে পণ্য পৃষ্ঠা

গত ক্লাসে আমরা একটি আলাদা তৈরি করেছি পণ্যের জন্য পৃষ্ঠা। এখন আমাদের এটি করা প্রয়োজন যাতে ক্লিক করলে যেকোনো বোতামে আমাদের পৃষ্ঠা ব্রাউজারে উপস্থিত হয়।

প্রথমে এটির জন্য একটি ঠিকানা সংযুক্ত করি, যেখানে এটি প্রদর্শিত হবে। ফাইলটি খুলুন App.jsx, যেখানে আমরা রুটগুলি নির্দিষ্ট করি, এবং যোগ করি children-এ আরও একটি চাইল্ড রুট (ভুলবেন না ProductPage.jsx ইম্পোর্ট করতে)। পথ এবং কম্পোনেন্ট নির্দিষ্ট করুন যা প্রদর্শন করা হবে:

{
	path: '/products/:productId',
	element: <ProductPage />,
},

এখন ProductsList.jsx খুলুন products ফোল্ডারে এবং dispProducts-এর জন্য কোডটি একটু পরিবর্তন করুন। এখন আমাদের একটি আলাদা পৃষ্ঠা রয়েছে প্রতিটি পণ্যের সম্পূর্ণ তথ্য সহ। এর মানে হল পণ্যের তালিকায় আমরা শুধুমাত্র পণ্যের নাম প্রদর্শন করব এবং বর্ণনার একটি সংক্ষিপ্ত পাঠ্য। আমরা এছাড়াও রাউটার লাইব্রেরি থেকে নেভিগেশন এলিমেন্ট Link আকারে একটি লিঙ্ক যোগ করব, যাতে ক্লিক করলে পণ্যের পৃষ্ঠায় যাওয়া যাবে। আমরা additionally div কে product-excerpt ক্লাসটি যোগ করব, যাতে পণ্যগুলি আলাদা দেখায়। এখন dispProducts-এর জন্য আমাদের কোডটি এইরকম হবে:

const dispProducts = products.map((product) => (
	<div key={product.id} className="product-excerpt">
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<Link to={`/products/${product.id}`} className="link-btn">
			view
		</Link>
	</div>
))

Link ইম্পোর্ট করি:

import { Link } from 'react-router-dom'

এবং link-btn এবং product-excerpt ক্লাসের জন্য index.css-এ স্টাইল যোগ করি:

.product-excerpt {
	margin-top: 30px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}

.link-btn {
	border: 1.5px solid gray;
	border-radius: 10px;
	background-color: coral;
	color: black;
	padding: 1px 12px 1px 12px;
}

সর্বশেষে, বাম মেনুতে থাকা লিঙ্কটিকেও কাজ করানো যাক, যেটি পণ্যের তালিকার পৃষ্ঠায় নিয়ে যায়, যাতে আমরা যেকোনো অন্য জায়গা থেকে সেখানে যেতে পারি। এটি করার জন্য, আমাদের root.jsx খুলুন এবং এই কোড লাইনটি প্রতিস্থাপন করুন:

<a>Products</a>

নিম্নলিখিতটি দিয়ে:

<NavLink to="/products" end>
	Products
</NavLink>

আমরা NavLink কে React রাউটার লাইব্রেরি থেকে ইম্পোর্ট করতে ভুলব না:

import { Outlet, NavLink } from 'react-router-dom'

আমাদের অ্যাপ্লিকেশন চালু করি। এখন আমরা পারেন যেকোনো পণ্যের তথ্য পৃষ্ঠায় দেখতে, view বাটনে ক্লিক করে। এখন একটি নতুন পণ্য যোগ করে দেখুন এবং আলাদা পৃষ্ঠায় এর তথ্য view বাটনে ক্লিক করে দেখুন। এছাড়াও এখন, পণ্যের তালিকায় ফিরে যেতে বাম মেনুতে 'Products'-এ ক্লিক করাই যথেষ্ট। বিভিন্ন পৃষ্ঠায় থাকা অবস্থায়, ব্রাউজারের অ্যাড্রেস বারে URL কীভাবে পরিবর্তিত হয় তা দেখুন।

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশন খুলুন। App.jsx ফাইলে শিক্ষার্থীর পৃষ্ঠার জন্য আরও একটি চাইল্ড রুট তৈরি করুন।

StudentsList.jsx ফাইলে dispStudents-এর জন্য কোডে পরিবর্তনগুলি আনুন, যেমন পাঠে দেখানো হয়েছে।

বাম মেনুতে 'Students' লিঙ্কটি এমনভাবে তৈরি করুন যাতে এটি শিক্ষার্থীদের তালিকার পৃষ্ঠায় নিয়ে যায়। নিশ্চিত করুন যে সবকিছু কাজ করছে।

দেখুন কীভাবে মানটি পরিবর্তিত হয় ব্রাউজারের অ্যাড্রেস বারে, আপনি বর্তমানে কোন পৃষ্ঠায় আছেন তার উপর নির্ভর করে।