Redux හි බ්රවුසරයේ නිෂ්පාදන පිටුව

පෙර පාඩමේදී අපි නිෂ්පාදනය සඳහා වෙනම පිටුවක් සාදා ගත්තෙමු. දැන් අපට අවශ්‍ය වන්නේ ඕනෑම බොත්තමක් ක්ලික් කළ විට අපගේ පිටුව බ්රවුසරයේ පෙනී සිටීමටය.

පළමුව එය පෙන්වනු ඇති ලිපිනය එක් කරමු. අපි මාර්ග ලියා ඇති App.jsx ගොනුව විවෘත කර, children හි තවත් ළමා මාර්ගයක් එක් කරමු (ProductPage.jsx ආයාත කිරීමට අමතක නොකරන්න). මාර්ගය සහ අපි පෙන්වන සංරචකය සඳහන් කරමු:

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

දැන් අපි products ෆෝල්ඩරයේ ඇති ProductsList.jsx විවෘත කර dispProducts සඳහා කේතය ටිකක් වෙනස් කරමු. දැන් අපට එක් එක් නිෂ්පාදනය සඳහා සම්පූර්ණ තොරතුරු සහිත වෙනම පිටුවක් ඇත. එබැවින් නිෂ්පාදන ලැයිස්තුවේදී අපි නිෂ්පාදනයේ නම සහ කෙටි කළ විස්තර පෙළ පමණක් පෙන්වමු. එසේම අපි රවුටර් පුස්තකාලයෙන් ගත් Link සංචාලන මූලද්‍රව්‍යයක් ලෙස සබැඳියක් එක් කරමු, එය ක්ලික් කිරීමෙන් නිෂ්පාදන පිටුවට යා හැකිය. අපි ඩිව් එකට 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'

අපි index.css හි link-btn සහ product-excerpt පන්ති සඳහා විලාසිතා එක් කරමු:

.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'

අපගේ යෙදුම ආරම්භ කරමු. දැන් අපට නරඹන්න බොත්තම ක්ලික් කිරීමෙන් ඕනෑම නිෂ්පාදනයක් පිළිබඳ තොරතුරු පිටුවට පිවිසිය හැකිය. නව නිෂ්පාදනයක් එක් කිරීමට දැන් උත්සාහ කර එහි තොරතුරු වෙනම පිටුවේ නරඹන්න බොත්තම ක්ලික් කර බලන්න. එසේම දැන්, නිෂ්පාදන ලැයිස්තුවට ආපසු යාමට වම් පස මෙනුවේ ඇති 'Products' මත ක්ලික් කිරීම ප්‍රමාණවත්ය. විවිධ පිටු වල සිටියදී, බ්රවුසරයේ ලිපින තීරුවේ URL වෙනස් වන ආකාරය බලන්න.

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කරන්න. App.jsx ගොනුවේ ශිෂ්‍ය පිටුව සඳහා තවත් ළමා මාර්ගයක් සාදන්න.

StudentsList.jsx ගොනුවේ, පාඩමේ පෙන්වා ඇති පරිදි dispStudents සඳහා කේතයේ වෙනස්කම් කරන්න.

වම් පස මෙනුවේ ඇති 'Students' සබැඳිය ශිෂ්‍ය ලැයිස්තු පිටුවට යන ලෙස සකසන්න. සියල්ල ක්‍රියාත්මක වන බව පරීක්ෂා කරන්න.

ඔබ දැන් සිටින්නේ කුමන පිටුවේ ද යන්න මත බ්රවුසරයේ ලිපින තීරුවේ අගය වෙනස් වන ආකාරය බලන්න.