Արտադրանքի էջը դիտարկիչում 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' հղումը ձախ մենյույում տանի դեպի ուսանողների ցանկի էջը: Ստուգեք, որ ամեն ինչ աշխատում է:

Տեսեք, թե ինչպես կփոխվի արժեքը դիտարկիչի հասցեի տողում, կախված նրանից, թե որ էջին եք դուք հիմա գտնվում: