Kuangalia Kiungo Kikichofanya Kazi katika React Router

Tuchukulie tumeweka bidhaa kadhaa kwenye programu yetu na tunatazama kila moja ya bidhaa hizo. Je, tutaelejea kwenye ukurasa wa bidhaa gani tulipo sasa? Hebu tuangazie bidhaa hiyo kwenye orodha, kwa mfano kwa herufi nene na rangi ya kahawia, na ikiwa kiungo bado kinapakuliwa, basi kwa rangi ya kijivu.

Kwa kuanzia, nenda kwenye ukurasa wa kwanza, ongeza bidhaa 4 kwenye orodha na kwa kila moja yao weka data. Wape majina yoyote.

Katika kuangazia kiungo kinachofanya kazi, kitengo NavLink kitatusaidia, hiki ni aina maalum ya kitengo Link, ambacho kinajua hali ya data. Kawaida hutumika wakati wa kuunda menyu ya urambazaji.

Hebu tufungue root.jsx na tuagize NavLink (usisahau kuondoa uagizaji wa Link, laana React inaweza kukasirika, kwani hatutumii tena):

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

Kisha kwenye muundo badilisha kitengo Link kuwa NavLink:

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

Na uongeze prop className, na pia tutumie mantiki ya masharti. Ikiwa ukurasa umepakuliwa, basi kiungo kitakuwa katika hali ya kufanya kazi, ikiwa kinapakuliwa, basi katika hali ya upakiaji, ikiwa hakuna kitu kinachotokea, basi kitabaki kama ilivyo. Kutokana na hili, darasa ya kiungo itabadilika:

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

Imebaki tu tuongeze mitindo kwa darasa active na loading kwenye faili yetu ya css:

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

a.loading {
	color: gray;
}

Imekwisha! Sasa bofya kwenye bidhaa kwenye orodha.

Chukua programu uliyoiumba kwenye kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, kutekeleza ndani yake kuangazia kiungo kinachofanya kazi kwa orodha ya wanafunzi ili iwe wazi data ya mwanafunzi gani user anachotazama sasa.