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 илова кунем, а ҳамчунин мантиқи шартиро истифода барем. Агар саҳифа бор шуд, пас пайванд мегузарад ба ҳолати актив, агар бор мешавад, пас ба ҳолати боршавӣ, агар ҳеҷ чизе на рӯй надод, пас қаблии худ мемонад. Вобаста ба ин ме класси пайванд тағйир меёбад:

<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;
}

Омода аст! Ва акнун ба маҳсулотҳо дар рӯйхат клик кунед.

Барномаеро гиред, ки шумо дар вазифаҳои дарсҳои гузашта сохтед. Бо истифода аз маводҳои дарс, дар он амалӣ кунед мушаххас кардани пайванди актив барои рӯйхати донишҷӯён то фаҳмида шавад маълумоти кадом донишҷӯро корбар ҳозир тамошо мекунад.