Ukurasa wa Bidhaa kwenye Kivinjari katika Redux

Katika somo lililopita tulifanya ukurasa tofauti kwa bidhaa. Sasa tunahitaji kufanya hivi, ili wakati wa kubofya kitufe chochote ukurasa wetu uonekane kwenye kivinjari.

Kuanza, tuiambatilishe anwani, ambayo itaonyeshwa. Wacha tufungue faili App.jsx, ambayo tunaweka njia, na tuongeze kwenye children njia nyingine ya watoto (usisahau kuingiza ProductPage.jsx). Tuweke njia na komponenti, ambayo tutatoa:

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

Sasa wacha tufungue ProductsList.jsx katika folda products na tubadilishe kidogo msimbo wa dispProducts. Sasa tuna ukurasa tofauti na taarifa kamili kuhusu kila bidhaa. Hii inamaanisha katika orodha ya bidhaa tutaonyesha tu jina la bidhaa na maandishi mafupi ya maelezo. Pia tutaongeza kiungo kwa umbo la kipengele cha urambazaji Link kutoka kwenye maktaba ya router, ambapo kubofya kutakuwa na uwezo wa kufika kwenye ukurasa wa bidhaa. Tuongeze pia darasa la div product-excerpt, ili kutenganisha bidhaa. Sasa msimbo wetu wa dispProducts utakuwa huu:

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>
))

Wacha tuingize Link:

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

Na tuongeze mitindo kwa madarasa link-btn na product-excerpt kwenye 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;
}

Mwishowe, wacha tufanye pia kiungo kinachofanya kazi kwenye menyu ya kushoto, kinachoongoza kwenye ukurasa wa orodha ya bidhaa, ili tuweze kuingia ndani yake kutoka sehemu nyingine yoyote. Ili kufanya hivyo, fungua root.jsx wetu na ubadilishe mstari huu wa msimbo:

<a>Products</a>

Kuwa huu:

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

Pia tusisahau kuingiza NavLink kutoka kwenye maktaba ya React router:

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

Wacha tuianzishe programu yetu. Sasa tunaweza kutoka kwenye ukurasa wa taarifa kuhusu bidhaa yoyote kwa kubofya kitufe cha kutazama. Jaribu sasa kuongeza bidhaa mpya na uangalie taarifa kuhusu hiyo kwenye ukurasa tofauti kwa kubofya kitufe cha kutazama. Pia sasa, kurudi kwenye orodha ya bidhaa inatosha kubofya kwenye 'Products' kwenye menyu ya kushoto. Ukiwa kwenye kurasa tofauti, angalia jinsi URL inavyobadilika kwenye mstari wa anwani wa kivinjari.

Fungua programu yako ya wanafunzi. Kwenye faili App.jsx unda njia nyingine ya watoto kwa ukurasa wa mwanafunzi.

Kwenye faili StudentsList.jsx weka katika msimbo mabadiliko kwa dispStudents, kama inavyoonyeshwa katika somo.

Fanya hivi, ili kiungo 'Students' katika menyu ya kushoto kiongoze kwenye ukurasa wa orodha ya wanafunzi. Hakikisha kuwa kila kitu kinafanya kazi.

Angalia jinsi thamani itakavyobadilika kwenye mstari wa anwani wa kivinjari, kulingana na ukurasa gani uko sasa.