აქტიური ბმულის გამოკვეთა 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;
}

მზადაა! ახლა კი დააწკაპუნეთ პროდუქტებზე სიაში.

აიღეთ აპლიკაცია, რომელიც თქვენ შექმენით წინა გაკვეთილების დავალებებში. გაკვეთილის მასალის გამოყენებით, რეალიზაცია გაუკეთეთ მას აქტიური ბმულის გამოკვეთას სტუდენტების სიისთვის ისე, რომ გასაგები იყოს რომელი სტუდენტის მონაცემებს ათვალიერებს მომხმარებელი ამჟამად.