Produktside i browseren i Redux

I den sidste lektion lavede vi en separat side for et produkt. Nu er vi nødt til at gøre det sådan, at når vi klikker på en knap, vises vores side i browseren.

Lad os til at starte med tilknytte en adresse, hvor den vil blive vist. Åbn filen App.jsx, hvor vi definerer ruterne, og tilføj en underordnet rute mere til children (glem ikke at importere ProductPage.jsx). Angiv stien og komponentet, som skal vises:

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

Lad os nu åbne ProductsList.jsx i mappen products og ændre koden for dispProducts en smule. Nu har vi en separat side med fuld information om hvert produkt. Det betyder, at vi i produktlisten kun vil vise produktets navn og en forkortet beskrivelsestekst. Vi vil også tilføje et link i form af et navigationselement Link fra routerbiblioteket, ved klik på hvilket man kan komme til produktsiden. Lad os også tilføje en div med klassen product-excerpt for at adskille produkterne. Nu vil vores kode for dispProducts se sådan ud:

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

Lad os importere Link:

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

Og lad os tilføje styling for klassene link-btn og product-excerpt i 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;
}

Endelad os også gøre linket i menuen til venstre funktionelt, som fører til siden med produktlisten, så vi kan komme til den fra ethvert andet sted. For at gøre dette åbner vi vores root.jsx og erstat denne kodelinje:

<a>Products</a>

Med følgende:

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

Lad os også huske at importere NavLink fra biblioteket til React router:

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

Lad os starte vores applikation. Nu kan vi komme ud på informationssiden for ethvert produkt ved at klikke på vis-knappen. Prøv at tilføje et nyt produkt og se information om det på en separat side ved at klikke på vis-knappen. Også nu, for at vende tilbage til produktlisten er det nok at klikke på 'Products' i menuen til venstre. Mens du er på forskellige sider, se hvordan URL'en ændrer sig i browserens adresselinje.

Åbn din applikation med studerende. I filen App.jsx opret endnu en underordnet rute for studerendesiden.

I filen StudentsList.jsx foretag ændringer i koden for dispStudents, som vist i lektionen.

Gør det sådan, at linket 'Students' i menuen til venstre fører til siden med listen over studerende. Kontroller, at alt fungerer.

Se hvordan værdien i browserens adresselinje ændrer sig, afhængigt af hvilken side du er på lige nu.