Reduxdagi mahsulot sahifasi brauzerda

O‘tgan darsimizda biz mahsulot uchun alohida sahifa yaratdik. Endi bizga kerak bo‘lgan narsa - har qanday tugmani bosganimizda bizning sahifamiz brauzerda paydo bo‘lishi.

Boshlanish uchun, uni ko‘rsatiladigan manzilga bog‘lab qo‘yamiz. Marshrutlarni ko‘rsatadigan App.jsx faylini ochamiz va children ichiga yana bir bolalar marshrutini qo‘shamiz (ProductPage.jsx ni import qilishni unutmang). Yo‘lni va chiqaradigan komponentimizni ko‘rsatamiz:

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

Endi products papkasidagi ProductsList.jsx ni ochamiz va dispProducts uchun kodni biroz o‘zgartiramiz. Endi bizda har bir mahsulot haqida to‘liq ma’lumot bor alohida sahifa bor. Demak, mahsulotlar ro‘yxatida biz faqat mahsulot nomi va qisqartirilgan tavsif matnini ko‘rsatamiz. Shuningdek, biz router kutubxonasidan Link navigatsiya elementi sifatida havola qo‘shamiz, uni bosganda mahsulot sahifasiga o‘tish mumkin bo‘ladi. Shuningdek, mahsulotlarni ajratish uchun div ga product-excerpt klassini qo‘shamiz. Endi dispProducts uchun bizning kodimiz shunday bo‘ladi:

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 ni import qilamiz:

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

Va index.css da link-btn va product-excerpt klasslari uchun uslublarni qo‘shamiz:

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

Oxirgi qadam sifatida, chap menyudagi mahsulotlar ro‘yxati sahifasiga olib boradigan havolani ham ishlaydigan qilaylik, shunda biz uni boshqa joydan ham topishimiz mumkin. Buning uchun root.jsx faylimizni ochamiz va ushbu kod qatorini almashtiramiz:

<a>Products</a>

Quyidagiga:

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

Shuningdek, React router kutubxonasidan NavLink ni import qilishni unutmaymiz:

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

Ilovamizni ishga tushiramiz. Endi biz ko‘rish tugmasini bosish orqali har qanday mahsulot haqidagi ma’lumot sahifasiga chiqishimiz mumkin. Yangi mahsulot qo‘shib ko‘ring va uning haqidagi ma’lumotni alohida sahifada ko‘rish tugmachasini bosib ko‘ring. Shuningdek, endi mahsulotlar ro‘yxatiga qaytish uchun chap menyudagi 'Products' ni bosish kifoya. Turli sahifalarda bo‘lganingizda, brauzerning manzilar qatoridagi URL qanday o‘zgarayotganiga qarang.

Talabalar bilan ilovangizni oching. App.jsx faylida talaba sahifasi uchun yana bir bolalar marshrutini yarating.

StudentsList.jsx faylida, darsda ko‘rsatilgandek, dispStudents uchun kodga o‘zgartirishlar kiriting.

Chap menyudagi 'Students' havolasi talabalar ro‘yxati sahifasiga olib boradigan qiling. Hammasi ishlashini tekshiring.

Brauzer manzilar qatoridagi qiymat qanday o‘zgarayotganiga qarang, hozir qaysi sahifada ekansiz, shunga qarab.