Productpagina in de browser in Redux

In de vorige les hebben we een aparte pagina voor het product gemaakt. Nu moeten we ervoor zorgen dat wanneer er op een knop wordt geklikt, onze pagina in de browser verschijnt.

Laten we eerst een adres toewijzen waarop het wordt weergegeven. Laten we het bestand App.jsx openen, waarin we de routes specificeren, en voegen we in children nog een childroute toe (vergeet niet om ProductPage.jsx te importeren). Laten we het pad en de component specificeren die we gaan weergeven:

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

Laten we nu ProductsList.jsx openen in de map products en de code voor dispProducts een beetje aanpassen. Nu hebben we een aparte pagina met volledige informatie over elk product. Dat betekent dat we in de productlijst alleen de productnaam en een verkorte beschrijvingstekst zullen weergeven. We voegen ook een link toe in de vorm van een navigatie-element Link uit de routerbibliotheek, waarop geklikt kan worden om naar de productpagina te gaan. Laten we ook een div de klasse product-excerpt geven om de producten visueel te scheiden. Nu ziet onze code voor dispProducts er als volgt uit:

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

Laten we Link importeren:

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

En laten we stijlen toevoegen voor de klassen link-btn en product-excerpt in 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;
}

Tot slot, laten we ook de link in het menu links werkend maken, die naar de pagina met de productlijst leidt, zodat we erin kunnen komen vanaf elke andere plaats. Om dit te doen, openen we onze root.jsx en vervangen we deze regel code:

<a>Products</a>

Door de volgende:

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

Laten we ook niet vergeten om NavLink te importeren uit de bibliotheek voor React router:

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

Laten we onze applicatie starten. Nu kunnen we uitkomen op de informatiepagina van elk product door op de bekijkknop te klikken. Probeer nu een nieuw product toe te voegen en bekijk de informatie ervan op een aparte pagina door op de bekijkknop te klikken. Ook nu is het, om terug te keren naar de productlijst, voldoende om te klikken op 'Products' in het menu links. Terwijl je op verschillende pagina's bent, bekijk hoe de URL in de adresbalk van de browser verandert.

Open je applicatie met studenten. Maak in het bestand App.jsx nog een childroute voor de studentenpagina.

Breng in het bestand StudentsList.jsx wijzigingen aan in de code voor dispStudents, zoals getoond in de les.

Zorg ervoor dat de link 'Students' in het linkermenu naar de pagina met de lijst van studenten leidt. Controleer of alles werkt.

Bekijk hoe de waarde in de adresbalk van de browser verandert, afhankelijk van de pagina waarop je je momenteel bevindt.