Pagina produsului în browser în Redux

În lecția precedentă am făcut o pagină separată pentru produs. Acum trebuie să facem astfel încât, atunci când apăsăm pe un buton, pagina noastră să apară în browser.

Pentru început, să-i atașăm o adresă la care va fi afișată. Deschideți fișierul App.jsx, în care definim rutele, și să adăugăm în children încă o rută copil (nu uitați să importați ProductPage.jsx). Să specificăm calea și componenta pe care o vom afișa:

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

Acum să deschidem ProductsList.jsx în directorul products și să modificăm puțin codul pentru dispProducts. Acum avem o pagină separată cu informații complete despre fiecare produs. Aceasta înseamnă că în lista de produse noi vom afișa doar numele produsului și un text scurt al descrierii. De asemenea, noi vom adăuga un link sub formă de element de navigare Link din biblioteca router-ului, la apăsarea căruia se va putea accesa pagina produsului. Să adăugăm și div-ului clasa product-excerpt, pentru a separa produsele. Acum codul nostru pentru dispProducts va fi astfel:

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

Să importăm Link:

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

Și să adăugăm stiluri pentru clasele link-btn și 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;
}

În final, să facem și link-ul din meniul din stânga funcțional, care duce la pagina cu lista de produse, pentru a putea accesa din orice alt loc. Pentru aceasta, să deschidem root.jsx și să înlocuim această linie de cod:

<a>Products</a>

Cu următoarea:

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

De asemenea, să nu uităm să importăm NavLink din biblioteca pentru React router:

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

Să pornim aplicația noastră. Acum putem accesa pagina cu informații despre orice produs, apăsând pe butonul de vizualizare. Încercați acum să adăugați un produs nou și să verificați informațiile despre el pe o pagină separată apăsând butonul de vizualizare. De asemenea, acum, pentru a vă întoarce la lista de produse este suficient să faceți clic pe 'Products' în meniul din stânga. Fiind pe diferite pagini, observați cum se modifică URL-ul în bara de adresă a browser-ului.

Deschideți aplicația voastră cu studenții. În fișierul App.jsx creați încă o rută copil pentru pagina studentului.

În fișierul StudentsList.jsx faceți în cod modificări pentru dispStudents, așa cum este arătat în lecție.

Faceți astfel încât link-ul 'Students' din meniul din stânga să ducă la pagina cu lista de studenți. Verificați că totul funcționează.

Urmăriți cum se va schimba valoarea din bara de adresă a browser-ului, în funcție de pagina pe care vă aflați acum.