Tuoteselain Reduxissa

Edellisellä tunnilla teimme erillisen sivun tuotteelle. Nyt meidän on tehtävä niin, että kun painamme mitä tahansa painiketta, sivumme ilmestyy selaimessa.

Aluksi kiinnitetään sille osoite, jossa se näytetään. Avataan tiedosto App.jsx, jossa määrittelemme reitit, ja lisätään children:een vielä yksi lapsireitti (älä unohda tuoda ProductPage.jsx). Määritetään polku ja komponentti, joka nostetaan esiin:

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

Avataan nyt ProductsList.jsx kansiossa products ja muutetaan koodia hieman dispProducts:lle. Nyt meillä on erillinen sivu, jossa on täydelliset tiedot jokaisesta tuotteesta. Tämä tarkoittaa, että tuotelistassa näytämme vain tuotteen nimen ja lyhennetyn kuvauksen. Lisäämme myös linkin navigointielementin muodossa Link reitittimen kirjastosta, jota napsauttamalla pääsee tuotesivulle. Lisätään myös div:lle luokka product-excerpt erottamaan tuotteet toisistaan. Nyt dispProducts:n koodimme on tällainen:

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

Tuodaan Link:

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

Ja lisätään tyylejä luokille link-btn ja product-excerpt tiedostoon 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;
}

Lopuksi tehdään myös vasemmassa valikossa olevasta linkistä, joka johtaa tuotelistasivulle, toimiva, jotta pääsemme sinne mistä tahansa muusta paikasta. Avataan root.jsx ja korvataan tämä koodirivi:

<a>Products</a>

Seuraavalla:

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

Älä myöskään unohda tuoda NavLink React-reitittimen kirjastosta:

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

Käynnistetään sovelluksemme. Nyt voimme päästä minkä tahansa tuotteen tiedoille napsauttamalla katselupainiketta. Yritä nyt lisätä uusi tuote ja katsoa sen tietoja erillisellä sivulla napsauttamalla katselupainiketta. Myös nyt, palataksesi tuotelistaan riittää, että napsautat 'Products' vasemmassa valikossa. Ollessasi eri sivuilla, katso miten selaimen osoiterivillä oleva URL muuttuu.

Avaa opiskelijasovelluksesi. Tiedostossa App.jsx luo vielä yhden lapsireitin opiskelijasivulle.

Tiedostossa StudentsList.jsx tee koodiin muutoksia dispStudents:lle, kuten oppitunnilla on esitetty.

Tee niin, että linkki 'Students' vasemmassa valikossa johtaa opiskelijalista-sivulle. Tarkista, että kaikki toimii.

Katso miten selaimen osoiterivillä oleva arvo muuttuu riippuen siitä, millä sivulla olet parhaillaan.