React Router-da Aktiv Linkin Secilmesi

Təsəvvür edin ki, biz ərizəmizə bir neçə məhsul əlavə etmişik və hər bir məhsula baxırıq. Bəs hazırda hansı məhsulun səhifəsində olduğumuzu necə başa düşək? Gəlin bu məhsulu siyahıda, məsələn, qalın şrift və qəhvəyi rənglə vurğulayaq, əgər link hələ yüklənirsə, onda boz rəngdə.

Başlamaq üçün əsas səhifəyə daxil olun, siyahıya 4 məhsul əlavə edin və onların hər biri üçün məlumatları daxil edin. Onlara istənilən adlar verin.

Aktiv linki vurğulamaqda bizə NavLink komponenti kömək edəcək, bu Link komponentinin bir növüdür, hansı ki, məlumatların vəziyyətindən xəbərdardır. Adətən o, naviqasiya menyu yaradılarkən tətbiq olunur.

Gəlin root.jsx faylını açaq və NavLink import edək (Link importunu silməyi unutmayın, yoxsa React etiraz edə bilər, çünki biz onu artıq istifadə etmirik):

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

Sonra isə layihədə Link komponentini NavLink ilə əvəz edək:

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

Və ona className propunu əlavə edək, həmçinin şərti məntiqdən istifadə edək. Əgər səhifə yüklənibsə, onda link aktiv vəziyyətə keçəcək, əgər yüklənirsə, onda yüklənmə vəziyyətinə, əgər heç nə baş vermirsə, onda əvvəlki kimi qalacaq. Buna əsasən linkin sinifi dəyişəcək:

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

Bizə yalnız css faylımızda active və loading sinifləri üçün stil əlavə etmək qalır:

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

a.loading {
	color: gray;
}

Hazırdır! İndi isə siyahıdakı məhsullara tıklayın.

Əvvəlki dərslərin tapşırıqlarında yaratdığınız ərizəni götürün. Dərsin materiallarından istifadə edərək, içində tələbələrin siyahısı üçün aktiv linkin vurğulanmasını həyata keçirin, elə ki, istifadəçinin hazırda hansı tələbənin məlumatlarına baxdığı anlaşılsın.