Redux'теги продукттун браузердеги бети

Өткөн сабакта биз продукт үчүн өзүнчө баракча жасадык. Эми бизге кнопканы басканда биздин баракчабыз браузерде пайда болушу үчүн керек.

Башында ага ал көрсөтүлө турган дарек бекитип коёлу. Биз маршруттарды көрсөткөн App.jsx файлын ачып, childrenга дагы бир багытынч маршрут кошобуз (ProductPage.jsx импорт кылууну унутпаңыз). Жолду жана көрсөтүлө турган компонентти көрсөтөбүз:

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

Эми products папкасындагы ProductsList.jsx ачып, 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 ачып, бул код сабын алмаштырабыз:

<a>Products</a>

Төмөнкүсү менен:

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

Ошондой эле React роутеринин китепканасынан NavLink импорт кылууну унутпайлы:

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

Колдонмобузду иштетели. Эми биз каалаган продукт тууралуу маалымат баракчасына көрүү баскычын басуу менен чыга алабыз. Азыр жаңы продукт кошуп, анын маалымын өзүнчө баракчада көрүү баскычын басуу менен сынап көрүңүз. Ошондой эле, азыр продукттар тизмесине кайтуу үчүн сол жактагы менюдан 'Products' басуу жетиштүү. Ар түрдүү баракчаларда болуп, браузердин дарек тилкесиндеги URL кантип өзгөрөрүн караңыз.

Студенттер менен колдонмонузду ачыңыз. App.jsx файлында студент бети үчүн дагы бир багытынч маршрут түзүңүз.

StudentsList.jsx файлында сабакта көрсөтүлгөндөй dispStudents үчүн кодго өзгөртүүлөрдү киргизиңиз.

Сол жактагы менюдагы 'Students' шилтемеси студенттер тизмесинин баракчасына алып баргандай кылыңыз. Баары иштеп жатканын текшериңиз.

Браузердин дарек тилкесиндеги маани азыр кайсы баракчада экениңизге жараша кантип өзгөрөрүн караңыз.