Produktseite im Browser in Redux

In der letzten Lektion haben wir eine separate Seite für das Produkt erstellt. Jetzt müssen wir daführ sorgen, dass beim Klicken auf einen Button unsere Seite im Browser erscheint.

Zunächst weisen wir ihr eine Adresse zu, unter der sie angezeigt wird. Wir öffnen die Datei App.jsx, in der wir die Routen definieren, und fügen in children eine weitere Unterroute hinzu (vergessen Sie nicht, ProductPage.jsx zu importieren). Wir geben den Pfad und die Komponente an, die ausgegeben werden soll:

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

Jetzt öffnen wir ProductsList.jsx im Ordner products und ändern den Code für dispProducts leicht ab. Jetzt haben wir eine separate Seite mit vollständigen Informationen zu jedem Produkt. Das bedeutet, dass wir in der Produktliste nur den Produktnamen und einen gekürzten Beschreibungstext anzeigen werden. Wir fügen auch einen Link in Form eines Navigationselements Link aus der Router-Bibliothek hinzu, beim Klicken auf den man zur Produktseite gelangt. Wir fügen außerdem der Div-Klasse product-excerpt hinzu, um die Produkte visuell zu trennen. Jetzt sieht unser Code für dispProducts so aus:

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

Wir importieren Link:

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

Und fügen Stile für die Klassen link-btn und product-excerpt in index.css hinzu:

.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;
}

Abschließend machen wir auch den Link im linken Menü, der zur Seite mit der Produktliste führt, funktionsfähig, damit wir von überall dorthin gelangen können. Dazu öffnen wir unsere root.jsx und ersetzen diese Codezeile:

<a>Products</a>

Durch die folgende:

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

Vergessen wir auch nicht, NavLink aus der Bibliothek für React Router zu importieren:

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

Starten wir unsere Anwendung. Jetzt können wir die Informationsseite für jedes Produkt aufrufen, indem wir auf die Ansicht-Schaltfläche klicken. Versuchen Sie, ein neues Produkt hinzuzufügen und sehen Sie sich die Informationen dazu auf einer separaten Seite an, indem Sie auf die Ansicht-Schaltfläche klicken. Außerdem reicht es jetzt aus, um zur Produktliste zurückzukehren, auf 'Products' im linken Menü zu klicken. Wenn Sie sich auf verschiedenen Seiten befinden, sehen Sie sich an, wie sich die URL in der Adressleiste des Browsers ändert.

Öffnen Sie Ihre Studenten-Anwendung. Erstellen Sie in der Datei App.jsx eine weitere Unterroute für die Studentenseite.

Nehmen Sie in der Datei StudentsList.jsx Änderungen im Code für dispStudents vor, wie in der Lektion gezeigt.

Sorgen Sie dafür, dass der Link 'Students' im linken Menü zur Seite mit der Studentenliste führt. Prüfen Sie, ob alles funktioniert.

Beobachten Sie, wie sich der Wert in der Adressleiste des Browsers ändert, abhängig davon, auf welcher Seite Sie sich gerade befinden.