Produktsida i webbläsaren i Redux

På föregående lektion skapade vi en separat sida för produkten. Nu måste vi göra så att när vi klickar på någon knapp kommer vår sida att visas i webbläsaren.

Låt oss först koppla en adress till den, där den kommer att visas. Öppna filen App.jsx, där vi anger rutter, och lägg till i children ytterligare en barnrutt (glöm inte att importera ProductPage.jsx). Ange sökvägen och komponenten som ska visas:

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

Låt oss nu öppna ProductsList.jsx i mappen products och ändra koden för dispProducts lite grann. Nu har vi en separat sida med fullständig information om varje produkt. Det betyder att i produktlistan kommer vi bara att visa produktens namn och en förkortad beskrivningstext. Vi kommer också att lägga till en länk i form av ett navigeringselement Link från routerbiblioteket, vid klick på vilken man kommer till produktsidan. Låt oss också lägga till klassen product-excerpt till div:en för att separera produkterna. Nu kommer vår kod för dispProducts att se ut så här:

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

Låt oss importera Link:

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

Och lägg till stilar för klasserna link-btn och 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;
}

Till sist, låt oss också göra länken i menyn till vänster fungerande, som leder till sidan med produktlistan, så att vi kan komma till den från vilken annan plats som helst. För att göra detta, öppna vår root.jsx och ersätt den här kodraden:

<a>Products</a>

Med följande:

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

Låt oss också komma ihåg att importera NavLink från biblioteket för React router:

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

Låt oss starta vår applikation. Nu kan vi komma till informationssidan om vilken produkt som helst genom att klicka på visningsknappen. Försök att lägga till en ny produkt och titta på informationen om den på en separat sida genom att klicka på visningsknappen. Nu räcker det också, för att återvända till produktlistan, att klicka på 'Products' i menyn till vänster. När du befinner dig på olika sidor, titta på hur URL:en i webbläsarens adressfält förändras.

Öppna din applikation med studenter. I filen App.jsx skapa ytterligare en barnrutt för studentsidan.

I filen StudentsList.jsx gör ändringar i koden för dispStudents, som visas i lektionen.

Gör så att länken 'Students' i vänstermenyn leder till sidan med studentlistan. Kontrollera att allt fungerar.

Se hur värdet i webbläsarens adressfält ändras, beroende på vilken sida du för närvarande befinner dig på.