პროდუქტის გვერდი ბრაუზერში Redux-ში

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

დასაწყისისთვის მივაბათ მისამართი, რომელზეც ის გამოჩნდება. გავხსნათ ფაილი App.jsx, რომელშიც ჩვენ ვწერთ მარშრუტებს და დავამატოთ children-ში კიდევ ერთი შვილი მარშრუტი (არ დაგავიწყდეთ ProductPage.jsx-ის იმპორტი). მივუთითოთ გზა და კომპონენტი, რომელიც გამოვსახავთ:

{
	path: '/products/:productId',
	element: <ProductPage />,
},

ახლა გავხსნათ ProductsList.jsx საქაღალდეში products და ოდნავ შევცვალოთ კოდი dispProducts-ისთვის. ახლა ჩვენ გვაქვს ცალკე გვერდი თითოეული პროდუქტის სრული ინფორმაციით. ეს ნიშნავს, რომ პროდუქტების სიაში ჩვენ გამოვსახავთ მხოლოდ პროდუქტის სახელს და აღწერის შემოკლებულ ტექსტს. ასევე ჩვენ დავამატებთ ბმულს ნავიგაციის ელემენტის სახით Link როუტერის ბიბლიოთეკიდან, რომელზე დაჭერისას შესაძლებელი იქნება პროდუქტის გვერდზე მოხვედრა. დავამატოთ ასევე div-ს კლასი product-excerpt, რომ გავანაწილოთ პროდუქტები. ახლა ჩვენი კოდი dispProducts-ისთვის იქნება ასეთი:

const dispProducts = products.map((product) => (
	<div key={product.id} className="product-excerpt">
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<Link to={`/products/${product.id}`} className="link-btn">
			view
		</Link>
	</div>
))

დავაიმპორტოთ Link:

import { Link } from 'react-router-dom'

და დავამატოთ სტილები კლასებისთვის link-btn და product-excerpt index.css-ში:

.product-excerpt {
	margin-top: 30px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}

.link-btn {
	border: 1.5px solid gray;
	border-radius: 10px;
	background-color: coral;
	color: black;
	padding: 1px 12px 1px 12px;
}

დასასრულს, მოდით ასევე გავაკეთოთ მოქმედი ბმული მენიუში მარცხნივ, რომელიც მიემართება პროდუქტების სიის გვერდზე, რათა შევძლოთ მასში სხვა ადგილიდან მოხვედრა. ამისთვის გავხსნათ ჩვენი root.jsx და შევცვალოთ კოდის ეს სტრიქონი:

<a>Products</a>

შემდეგით:

<NavLink to="/products" end>
	Products
</NavLink>

ასევე არ დაგვავიწყდეს NavLink-ის იმპორტი React როუტერის ბიბლიოთეკიდან:

import { Outlet, NavLink } from 'react-router-dom'

გავუშვათ ჩვენი აპლიკაცია. ახლა ჩვენ შეგვიძლია გამოვიდეთ ნებისმიერი პროდუქტის ინფორმაციის გვერდზე, დააჭირეთ ნახვის ღილაკს. სცადეთ ახლა დაამატოთ ახალი პროდუქტი და ნახოთ მისი ინფორმაცია ცალკე გვერდზე ნახვის ღილაკზე დაჭერით. ასევე ახლა, პროდუქტების სიაში დასაბრუნებლად საკმარისია მენიუში მარცხნივ 'Products'-ზე დაწკაპუნება. სხვადასხვა გვერდებზე ყოფნისას, შეხედეთ როგორ იცვლება URL მისამართების ზოლში ბრაუზერში.

გახსენით თქვენი აპლიკაცია სტუდენტებთან. ფაილში App.jsx შექმენით კიდევ ერთი შვილი მარშრუტი სტუდენტის გვერდისთვის.

ფაილში StudentsList.jsx შეიტანეთ კოდში ცვლილებები dispStudents-ისთვის, როგორც ნაჩვენებია გაკვეთილზე.

გახადეთ ისე, რომ ბმული 'Students' მარცხენა მენიუში მიემართებოდეს სტუდენტების სიის გვერდზე. შეამოწმეთ, რომ ყველაფერი იმუშავა.

შეხედეთ როგორ შეიცვლება მნიშვნელობა მისამართების ზოლში ბრაუზერში, იმის მიხედვით თუ რომელ გვერდზე ხართ ამჟამად.