React Router හි සක්‍රීය සබැඳිය ඉස්මතු කිරීම

අපගේ යෙදුමට නිෂ්පාදන කිහිපයක් එකතු කර ඇතැයි සිතන්න සහ ඒ සෑම එකක්ම අපි නරඹමින් සිටිමු. අපි දැන් සිටින්නේ කුමන නිෂ්පාදන පිටුවේදැයි කෙසේ අවබෝධ කර ගත හැකිද? අපි එම නිෂ්පාදනය ලැයිස්තුවේ ඉස්මතු කරමු, උදාහරණයක් ලෙස තද අකුරින් හා දුඹුරු පැහැයෙන්, තවද සබැඳිය තවම පූරණය වෙමින් පවතී නම් අළු පැහැයෙන්.

පළමුව, ප්‍රධාන පිටුවට ගොස්, ලැයිස්තුවට නිෂ්පාදන 4 ක් එක් කරන්න සහ ඒ සෑම එකක් සඳහාම දත්ත ඇතුළත් කරන්න. ඒවාට ඕනෑම නම් යොදන්න.

සක්‍රීය සබැඳිය ඉස්මතු කිරීමට අපට උපකාරී වන්නේ NavLink කොම්පෝනන්ටය, මෙය එක් වර්ගයකි Link කොම්පෝනන්ටයේ, එය දත්ත තත්වය පිළිබඳව දන්නා කොම්පෝනන්ටයකි. සාමාන්‍යයෙන් එය භාවිතා වන්නේ සංචාලන මෙනුවක් නිර්මාණය කිරීමේදී.

අපි දැන් root.jsx ගොනුව විවෘත කර NavLink ආයාත කරමු (Link ආයාතය ඉවත් කිරීමට අමතක නොකරන්න, නැතහොත් React එයට විරුද්ධ විය හැක, අපි එය තවදුරටත් භාවිතා නොකරන බැවින්):

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

ඉන්පසු පිරිසැලසුමේ, Link කොම්පෝනන්ටය NavLink කොම්පෝනන්ටය සමඟ ප්‍රතිස්ථාපනය කරමු:

<NavLink key={product.id} to={`products/${product.id}`}>
	{product.name ? product.name : <i>unnamed</i>}
</NavLink>

තවද එයට className prop එකක් එක් කරමු, සහ කොන්දේසි සහිත තර්කය භාවිතා කරමු. පිටුව පූරණය වී ඇත්නම්, සබැඳිය සක්‍රීය තත්වයට පත්වේ, එය පූරණය වෙමින් පවතී නම්, පූරණය වීමේ තත්වයට පත්වේ, කිසිදු ක්‍රියාවක් සිදු නොවේ නම්, පෙර පැවති තත්වයේම පවතී. මෙය මත පදනම්ව සබැඳියේ වර්ගය වෙනස් වේ:

<NavLink
	key={product.id}
	to={`products/${product.id}`}
	className={({ isActive, isPending }) =>
		isActive ? 'active' : isPending ? 'loading' : ''
	}
>
	{product.name ? product.name : <i>Unnamed</i>}
</NavLink>

අපට ඉතිරිව ඇත්තේ active සහ loading වර්ග සඳහා විලාසිතා එක් කිරීමයි අපගේ css ගොනුවට:

a.active {
	font-weight: bold;
	color: brown;
}

a.loading {
	color: gray;
}

සූදානම්! දැන් ලැයිස්තුවේ ඇති නිෂ්පාදන මත ක්ලික් කරන්න.

පසුගිය පාඩම් සඳහා කාර්යයන්හිදී ඔබ නිර්මාණය කළ යෙදුම ගන්න. පාඩමේ ද්‍රව්‍ය භාවිතා කරමින්, ශිෂ්‍යයන්ගේ ලැයිස්තුව සඳහා සක්‍රීය සබැඳිය ඉස්මතු කිරීම ක්‍රියාත්මක කරන්න, එමඟින් පරිශීලකයා දැන් නරඹන ශිෂ්‍යයාගේ දත්ත කුමක්දැයි පැහැදිලි වන පරිදි.