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

Дар дарси гузашта мо барои маҳсулот саҳифаи ҷудогона сохтем. Ҳоло ба мо лозим аст, ки ҳангоми пахш кардан ба тугмае дар браузер саҳифаи мо пайдо шавад.

Барои оғоз ба он суроғае (address) ҳамроҳ кунем, ки саҳифа дар он намоиш дода мешавад. Файли App.jsx-ро кушоед, ки дар он мо роҳнамоҳоро (routes) менависем, ва ба children як роҳнамои фарзанди дигар илова кунед (фаромӯш накунед, ки ProductPage.jsx-ро ворид кунед). Роҳ (path) ва компонентеро, ки хоҳем намоиш диҳем, муайян кунед:

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

Ҳоло биёед ProductsList.jsx-ро дар пӯшаи products кушоем ва барои 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'

Ва барои синфҳои 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 Router ворид кунем:

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

Барномаи худро оғоз кунем. Ҳоло мо метавонем ба саҳифаи маълумот дар бораи ҳар як маҳсулот бо пахш кардан ба тугмаи дидан берун шавем. Акнун кӯшиш кунед маҳсулоти нав илова кунед ва маълумотро дар бораи он дар саҳифаи ҷудогона бо пахш кардан ба тугмачаи дидан бубинед. Инчунин ҳоло, барои бозгашт ба рӯйхати маҳсулотҳо кофӣ аст, ки ба 'Products' дар менюи чап клик кунед. Дар саҳифаҳои гуногун буда, бубинед, ки URL дар сатри суроғаи браузер чӣ гуна тағир меёбад.

Барномаи худро бо донишҷӯён кушоед. Дар файли App.jsx барои саҳифаи донишҷӯ як роҳнамои фарзанди дигар эҷод кунед.

Дар файли StudentsList.jsx ба рамзи dispStudents тағирот ворид кунед, тавре ки дар дарс нишон дода шудааст.

Коре кунед, ки пайванди 'Students' дар менюи чап ба саҳифаи рӯйхати донишҷӯён биравад. Тафтиш кунед, ки ҳама чиз кор мекунад.

Бубинед, ки арзиш дар сатри суроғаи браузер чӣ гуна тағир меёбад, вобаста ба он ки дар кадом саҳифа ҳозир ҳастед.