Stranica proizvoda u pretraživaču u Redux-u

Na prošlom času smo napravili zasebnu stranicu za proizvod. Sada treba da postignemo da se pri kliku na bilo koje dugme naša stranica pojavi u pretraživaču.

Za početak, dodelićemo joj adresu na kojoj će se prikazivati. Otvorićemo fajl App.jsx, u kome navodimo rute, i dodati u children još jednu podređenu rutu (ne zaboravite da importujete ProductPage.jsx). Navedimo putanju i komponentu koju ćemo prikazivati:

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

Sada hajde da otvorimo ProductsList.jsx u folderu products i malo izmenimo kod za dispProducts. Sada imamo zasebnu stranicu sa potpunim informacijama o svakom proizvodu. Znači u listi proizvoda mi ćemo prikazivati samo naziv proizvoda i skraćeni tekst opisa. Takođe, mi ćemo dodati link u obliku navigacionog elementa Link iz biblioteke rutera, pri kliku na koji se može doći na stranicu proizvoda. Dodajmo takođe div-u klasu product-excerpt, da razdvojimo proizvode. Sada će naš kod za dispProducts biti ovakav:

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

Importujmo Link:

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

I dodajmo stilove za klase link-btn i product-excerpt u 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 kraj, hajde da takođe učinimo funkcijskim link u meniju levo, koji vodi na stranicu sa listom proizvoda, kako bismo mogli da dođemo do njega sa bilo kog drugog mesta. Za ovo ćemo otvoriti naš root.jsx i zameniti ovu liniju koda:

<a>Products</a>

Sa sledećom:

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

Takođe, ne zaboravimo da importujemo NavLink iz biblioteke za React router:

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

Pokrenimo našu aplikaciju. Sada možemo da dođemo do stranice sa informacijama o bilo kom proizvodu, klikom na dugme za pregled. Pokušajte sada da dodate novi proizvod i pogledajte informacije o njemu na zasebnoj stranici klikom na dugme za pregled. Takođe sada, da bismo se vratili na listu proizvoda dovoljno je da kliknemo na 'Products' u meniju levo. Dok ste na različitim stranicama, pogledajte kako se menja URL u adresnoj liniji pretraživača.

Otvorite vašu aplikaciju sa studentima. U fajlu App.jsx kreirajte još jednu podređenu rutu za stranicu studenta.

U fajlu StudentsList.jsx unesite u kod izmene za dispStudents, kao što je pokazano na času.

Učinite da link 'Students' u levom meniju vodi na stranicu sa listom studenata. Proverite da li sve radi.

Pogledajte kako će se menjati vrednost u adresnoj liniji pretraživača, u zavisnosti od toga na kojoj stranici se trenutno nalazite.