Stran izdelka v brskalniku v Redux

Na prejšnjem srečanju smo naredili ločeno stran za izdelek. Zdaj moramo poskrbeti, da se ob kliku na kakršen koli gumb naša stran prikaže v brskalniku.

Za začetek ji dodelimo naslov, na katerem se bo prikazovala. Odprimo datoteko App.jsx, v kateri določamo poti, in dodajmo v children še eno podrejeno pot (ne pozabite uvoziti ProductPage.jsx). Določimo pot in komponento, ki jo bomo prikazovali:

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

Zdaj odprimo ProductsList.jsx v mapi products in nekoliko spremenimo kodo za dispProducts. Zdaj imamo ločeno stran s popolnimi informacijami o vsakem izdelku. To pomeni, da bomo v seznamu izdelkov prikazovali le ime izdelka in skrajšano besedilo opisa. Prav tako bomo dodali povezavo v obliki navigacijskega elementa Link iz knjižnice za usmerjevalnik, ob kliku na katero se bomo lahko preusmerili na stran izdelka. Dodajmo še div-u razred product-excerpt, da ločimo izdelke. Zdaj bo naša koda za dispProducts takšna:

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

Uvozimo Link:

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

In dodajmo stilov za razreda link-btn in product-excerpt v 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;
}

Za konec, naredimo delujočo tudi povezavo v meniju na levi, ki vodi na stran s seznamom izdelkov, da lahko vstopimo vanj z katerega koli drugega mesta. Za to odprimo naš root.jsx in zamenjajmo to vrstico kode:

<a>Products</a>

Z naslednjo:

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

Prav tako ne pozabimo uvoziti NavLink iz knjižnice za React usmerjevalnik:

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

Zaženimo našo aplikacijo. Zdaj lahko greste na stran s podatki o katerem koli izdelku, tako da kliknete na gumb za ogled. Poskusite zdaj dodati nov izdelek in si oglejte informacije o njem na ločeni strani z klikom na gumb za ogled. Prav tako je zdaj za vrnitev k seznamu izdelkov dovolj, da kliknete na 'Products' v meniju na levi. Ko ste na različnih straneh, oglejte si, kako se spreminja URL v naslovni vrstici brskalnika.

Odprite vašo aplikacijo s študenti. V datoteki App.jsx ustvarite še eno podrejeno pot za stran študenta.

V datoteki StudentsList.jsx vnesite v kodo spremembe za dispStudents, kot je prikazano v lekciji.

Poskrbite, da bo povezava 'Students' v levem meniju vodila na stran s seznamom študentov. Preverite, da vse deluje.

Oglejte si, kako se bo spreminjala vrednost v naslovni vrstici brskalnika, glede na to na kateri strani se trenutno nahajate.