Produktside i nettleseren i Redux

I forrige forelesning lagde vi en separat side for produktet. Nå må vi gjøre slik at når vi klikker på en knapp, vil siden vår vises i nettleseren.

La oss først tildele en adresse den skal vises på. La oss åpne filen App.jsx, der vi definerer rutene, og legge til en underrute til i children (ikke glem å importere ProductPage.jsx). La oss spesifisere stien og komponenten som skal vises:

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

La oss nå åpne ProductsList.jsx i mappen products og endre koden for dispProducts litt. Nå har vi en separat side med full informasjon om hvert produkt. Det betyr at i produktlisten vil vi bare vise produktnavnet og en forkortet beskrivelsestekst. Vi vil også legge til en lenke i form av et navigasjonselement Link fra ruterbiblioteket, ved å klikke på denne vil man komme til produktsiden. La oss også legge til klassen product-excerpt på div-en for å skille produktene. Nå vil koden vår for dispProducts se slik ut:

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

La oss importere Link:

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

Og la oss legge til stiler 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;
}

Til slutt, la oss også gjøre lenken i menyen til venstre som leder til siden med produktlisten funksjonell, slik at vi kan komme til den fra hvor som helst annet sted. For å gjøre dette, la oss åpne root.jsx og erstatte denne kodelinjen:

<a>Products</a>

Med følgende:

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

La oss også huske å importere NavLink fra biblioteket for React router:

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

La oss starte applikasjonen vår. Nå kan vi gå til informasjonssiden om et hvilket som helst produkt ved å klikke på vis-knappen. Prøv å legge til et nytt produkt og se informasjonen om det på en separat side ved å klikke på vis-knappen. Også nå, for å gå tilbake til produktlisten er det nok å klikke på 'Products' i menyen til venstre. Når du er på forskjellige sider, se hvordan URL-en i adresselinjen i nettleseren endres.

Åpne applikasjonen din med studenter. I filen App.jsx, opprett enda en underrute for studentsiden.

I filen StudentsList.jsx, gjør endringer i koden for dispStudents, som vist i leksjonen.

Gjør slik at lenken 'Students' i venstremenyen lenker til siden med listen over studenter. Sjekk at alt fungerer.

Se hvordan verdien i adresselinjen i nettleseren endres, avhengig av hvilken side du for øyeblikket er på.