Faqja e Produktit në Shfletues në Redux

Në orën e kaluar ne bëmë një faqe të veçantë për produktin. Tani na duhet të bëjmë që kur klikohet në ndonjë buton, faqja jonë të shfaqet në shfletues.

Për fillim, le t'i caktojmë një adresë, në të cilën ajo do të shfaqet. Le të hapim skedarin App.jsx, ku ne përcaktojmë rrugët, dhe të shtojmë në children një rrugë fëmijë tjetër (mos harroni të importoni ProductPage.jsx). Le të përcaktojmë shtegun dhe komponentën, të cilën do të shfaqim:

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

Tani le të hapim ProductsList.jsx në dosjen products dhe të modifikojmë pak kodin për dispProducts. Tani ne kemi një faqe të veçantë me informacion të plotë për çdo produkt. Kjo do të thotë që në listën e produkteve ne do të shfaqim vetëm emrin e produktit dhe tekstin e shkurtuar të përshkrimit. Gjithashtu ne do të shtojmë një lidhje në formën e një elementi navigimi Link nga biblioteka e ruterit, duke klikuar në të cilën do të mund të shkohet në faqen e produktit. Le të shtojmë gjithashtu një klasë div-it product-excerpt, për të ndarë produktet. Tani kodi ynë për dispProducts do të jetë i tillë:

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

Le të importojmë Link:

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

Dhe le të shtojmë stilime për klasat link-btn dhe product-excerpt në 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;
}

Së fundi, le ta bëjmë gjithashtu funksionale lidhjen në menunë majtas, që të çojë në faqen me listën e produkteve, në mënyrë që të mundemi të hyjmë në të nga çdo vend tjetër. Për këtë, le të hapim root.jsx tonë dhe të zëvendësojmë këtë rresht kodi:

<a>Products</a>

Me këtë:

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

Gjithashtu le të mos harrojmë të importojmë NavLink nga biblioteka për React router:

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

Le të nisim aplikacionin tonë. Tani ne mundemi të dalim në faqen e informacionit për çdo produkt, duke klikuar në butonin e shikimit. Provoni tani të shtoni një produkt të ri dhe shikoni informacionin për të në faqen e veçantë duke klikuar butonin e shikimit. Gjithashtu tani, për t'u kthyer në listën e produkteve mjafton të klikoni në 'Products' në menunë majtas. Duke qenë në faqe të ndryshme, shikoni si ndryshon URL në shiritin e adresave të shfletuesit.

Hapni aplikacionin tuaj me studentët. Në skedarin App.jsx krijoni një rrugë fëmijë tjetër për faqen e studentit.

Në skedarin StudentsList.jsx bëni ndryshime në kod për dispStudents, siç tregohet në mësim.

Bëni që lidhja 'Students' në menunë majtas të çojë në faqen me listën e studentëve. Kontrolloni që gjithçka funksionon.

Shikoni si do të ndryshojë vlera në shiritin e adresave të shfletuesit, në varësi nga ajo në cilën faqe jeni aktualisht duke qëndruar.