Stránka produktu v prehliadači v Reduxe

Na minulej hodine sme vytvorili samostatnú stránku pre produkt. Teraz musíme zabezpečiť, aby sa po kliknutí na nejaké tlačidlo naša stránka zobrazila v prehliadači.

Na začiatok priradíme jej adresu, na ktorej sa bude zobrazovať. Otvoríme súbor App.jsx, v ktorom definujeme trasy, a pridáme do children ešte jednu podriadenú trasu (nezabudnite importovať ProductPage.jsx). Určíme cestu a komponent, ktorý budeme zobrazovať:

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

Teraz otvorme ProductsList.jsx v priečinku products a trochu upravme kód pre dispProducts. Teraz máme samostatnú stránku s úplnými informáciami o každom produkte. To znamená, že v zozname produktov budeme zobrazovať iba názov produktu a skrátený text popisu. Tiež pridáme odkaz v podobe navigačného prvku Link z knižnice routera, po kliknutí na ktorý sa bude možné dostať na stránku produktu. Pridajme tiež divu triedu product-excerpt, aby sme oddelili produkty. Teraz bude náš kód pre dispProducts vyzerať takto:

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

Importujeme Link:

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

A pridajme štýly pre triedy link-btn a product-excerpt do 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;
}

Na záver, urobme tiež funkčný odkaz v ľavom menu, vedúci na stránku so zoznamom produktov, aby sme sa do neho vedeli dostať z akéhokoľvek iného miesta. Preto otvorme náš root.jsx a nahraďme tento riadok kódu:

<a>Products</a>

Nasledujúcim:

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

Tiež nezabudnime importovať NavLink z knižnice pre React router:

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

Spustíme našu aplikáciu. Teraz môžeme prejsť na stránku s informáciami o akomkoľvek produkte kliknutím na tlačidlo zobrazenia. Skúste teraz pridať nový produkt a pozrite si informácie o ňom na samostatnej stránke kliknutím na tlačidlo zobrazenia. Tiež teraz, aby ste sa vrátili k zoznamu produktov, stačí kliknúť na 'Products' v menu vľavo. Keď ste na rôznych stránkach, pozrite si, ako sa mení URL v adresnom riadku prehliadača.

Otvorte svoju aplikáciu so študentmi. V súbore App.jsx vytvorte ešte jednu podriadenú trasu pre stránku študenta.

V súbore StudentsList.jsx vykonajte v kóde zmeny pre dispStudents, ako je ukázané v lekcii.

Zabezpečte, aby odkaz 'Students' v ľavom menu viedol na stránku so zoznamom študentov. Skontrolujte, že všetko funguje.

Pozrite si, ako sa bude meniť hodnota v adresnom riadku prehliadača v závislosti od toho, na akej stránke sa práve nachádzate.