Termékoldal a böngészőben Redux-ban

Az előző órán készítettünk egy külön oldalt a termékeknek. Most azt kell elérnünk, hogy bármelyik gombra kattintva a mi oldalunk megjelenjen a böngészőben.

Kezdésként rendeljünk hozzá egy címet, ahol meg fog jelenni. Nyissuk meg a App.jsx fájlt, amelyben az útvonalakat határozzuk meg, és adjunk hozzá a children-hoz még egy gyermek útvonalat (ne felejtsd el importálni a ProductPage.jsx-t). Adjunk meg egy elérési utat és egy komponenst, amit megjelenítünk:

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

Most nyissuk meg a ProductsList.jsx fájlt a products mappában és módosítsuk egy kicsit a kódot a dispProducts-hoz. Most már van egy külön oldalunk minden egyes termék teljes információjával. Ez azt jelenti, hogy a terméklistában mi csak a termék nevét és a leírás rövidített szövegét jelenítjük meg. Hozzáadunk egy linket is a navigációs elem formájában, Link a router könyvtárából, amelyre kattintva el lehet jutni a termék oldalára. Adjunk hozzá egy osztályt a div-nek is product-excerpt, hogy elválasszuk a termékeket. Most a dispProducts kódunk így fog kinézni:

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

Importáljuk a Link-et:

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

És adjunk hozzá stílusokat a link-btn és product-excerpt osztályokhoz a index.css fájlban:

.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;
}

Végül, tegyük működőképpen a bal oldali menüben lévő linket is, amely a terméklista oldalára vezet, hogy bárhonnan eljuthassunk oda. Ehhez nyissuk meg a root.jsx fájlt és cseréljük le ezt a kódsort:

<a>Products</a>

Erre:

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

Ne felejtsük el importálni a NavLink-et a React router könyvtárából:

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

Indítsuk el az alkalmazásunkat. Most már ki tudunk lépni bármelyik termék információ oldalára, a megtekintés gombra kattintva. Próbálj meg most hozzáadni egy új terméket és nézd meg az információit a különálló oldalon a megtekintés gombra kattintva. Szintén mostantól, hogy visszatérj a terméklistához elegendő rákattintani a 'Products'-ra a bal oldali menüben. Különböző oldalakon lévőként, figyeld meg, hogyan változik a URL a böngésző címsorában.

Nyisd meg a diákok alkalmazásodat. A App.jsx fájlban készíts még egy gyermek útvonalat a diák oldalához.

A StudentsList.jsx fájlban végezd el a kód módosításait a dispStudents-hoz, ahogyan az az órán bemutatásra került.

Tedd úgy, hogy a 'Students' link a bal oldali menüben a diákok listáját tartalmazó oldalra vezessen. Ellenőrizd, hogy minden működik.

Figyeld meg, hogyan változik az érték a böngésző címsorában, attól függően, hogy éppen melyik oldalon vagy.