Reduxда браузерда маҳсулот саҳифаси

Ўтган дарсимизда биз маҳсулот учун алохида саҳифа ясадик. Энди биз қандайдир тугмани босганда, бизнинг саҳифамиз браузерда пайдо бўлишини таъминлашимиз керак.

Бошлаш учун уни кўрсатиладиган манзилга бирлаштирамиз. Маршрутларимизни кўрсатадиган App.jsx файлини ochамиз ва childrenга яна бир болалар маршрутини қўшамиз (ProductPage.jsxни импорт қилишни унутманг). Йўлни ва чиқарадиган компонентни кўрсатамиз:

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

Энди products папкасидаги ProductsList.jsxни ochамиз ва dispProducts учун кодни озгина ўзгартирамиз. Энди бизда ҳар бир маҳсулот ҳақида тўлиқ маълумот бор алохида саҳифа мавжуд. Демак, маҳсулотлар рўйхатида биз фақат маҳсулот номини ва қисқартирилган тасниф матнини кўрсатамиз. Шунингдек, биз роутер кутубхонасидан навигация элементи сифатида Link ҳаволасини қўшамиз, уни босганда маҳсулот саҳифасига ўтиш мумкин бўлади. Маҳсулотларни ажратиш учун дивга 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'

Ва index.cssда link-btn ва product-excerpt синфлари учун стиллар қўшамиз:

.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ни ochамиз ва бу код сатрини алмаштирамиз:

<a>Products</a>

Бунига:

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

Шунингдек, React роутери учун кутубхонадан NavLinkни импорт қилишни унутмаймиз:

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

Иловамизни ишга туширамиз. Энди биз ҳар қандай маҳсулот ҳақида маълумот саҳифасига кўриш тугмасини босиб чиқамиз. Янги маҳсулот қўшиб кўринг ва унинг ҳақида алохида саҳифада кўриш тугмачасини босиб маълумотларни кўринг. Шунингдек, энді маҳсулотлар рўйхатига қайтиш учун чап менюдаги 'Products'ни босинг. Турли саҳифаларда бўлганингизда, браузер манзил сатридаги URL қандай ўзгараётини кўриб чикинг.

Студентлар билан иловаингизни ochинг. App.jsx файлида студент саҳифаси учун яна бир болалар маршрути яратинг.

StudentsList.jsx файлида dispStudents учун дарсда кўрсатилганидек ўзгартиришлар киритинг.

Чап менюдаги 'Students' ҳаволаси студентлар рўйхати саҳифасига олиб борадиган қилинг. Ҳаммаси ишлашини текширинг.

Ҳозир қай саҳифада бўлганлингизга қараб, браузер манзил сатридаги қиймат қандай ўзгараётини кўриб чикинг.