Σελίδα Προϊόντος στο Browser στο Redux

Στο προηγούμενο μάθημα δημιουργήσαμε μια ξεχωριστή σελίδα για το προϊόν. Τώρα πρέπει να κάνουμε έτσι ώστε όταν πατηθεί κάποιο κουμπί η σελίδα μας να εμφανίζεται στο browser.

Για αρχή θα ορίσουμε μια διεύθυνση στην οποία θα εμφανίζεται. Ας ανοίξουμε το αρχείο App.jsx, στο οποίο ορίζουμε τις διαδρομές, και θα προσθέσουμε στα children ένα ακόμη θυγατρικό route (μην ξεχάσετε να εισάγετε το ProductPage.jsx). Θα ορίσουμε το path και το component που θα εμφανίζεται:

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

Τώρα ας ανοίξουμε το ProductsList.jsx στον φάκελο products και ας αλλάξουμε ελαφρώς τον κώδικα για τα dispProducts. Τώρα έχουμε μια ξεχωριστή σελίδα με πλήρεις πληροφορίες για κάθε προϊόν. Αυτό σημαίνει ότι στη λίστα των προϊόντων θα εμφανίζουμε μόνο το όνομα του προϊόντος και ένα συντομευμένο κείμενο περιγραφής. Επίσης θα προσθέσουμε έναν σύνδεσμο με τη μορφή στοιχείου πλοήγησης Link από τη βιβλιοθήκη του router, upon clicking στον οποίο θα μπορούμε να πλοηγηθούμε στη σελίδα του προϊόντος. Θα προσθέσουμε επίσης μια κλάση product-excerpt στη div, ώστε να διαχωρίζονται τα προϊόντα. Τώρα ο κώδικας μας για τα dispProducts θα είναι ο εξής:

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

Θα εισάγουμε το Link:

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

Και θα προσθέσουμε στυλ για τις κλάσεις link-btn και product-excerpt στο 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;
}

Τέλος, ας κάνουμε επίσης λειτουργικό τον σύνδεσμο στο αριστερό μενού, που οδηγεί στη σελίδα με τη λίστα των προϊόντων, ώστε να μπορούμε να πλοηγηθούμε σε αυτήν από οποιοδήποτε άλλο σημείο. Για να το κάνουμε αυτό, ας ανοίξουμε το root.jsx και να αντικαταστήσουμε αυτήν τη γραμμή κώδικα:

<a>Products</a>

Με την ακόλουθη:

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

Επίσης, ας μην ξεχάσουμε να εισάγουμε το NavLink από τη βιβλιοθήκη για το React router:

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

Ας εκκινήσουμε την εφαρμογή μας. Τώρα μπορούμε να πλοηγηθούμε στη σελίδα πληροφοριών οποιουδήποτε προϊόντος, πατώντας στο κουμπί προβολής. Δοκιμάστε τώρα να προσθέσετε ένα νέο προϊόν και δείτε τις πληροφορίες για αυτό σε ξεχωριστή σελίδα πατώντας το κουμπί προβολής. Επίσης τώρα, για να επιστρέψετε στη λίστα προϊόντων αρκεί να κάνετε κλικ στο 'Products' στο μενού αριστερά. Βρίσκοντας σε διαφορετικές σελίδες, παρατηρήστε πώς αλλάζει το URL στη γραμμή διευθύνσεων του browser.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Στο αρχείο App.jsx δημιουργήστε ακόμη ένα θυγατρικό route για τη σελίδα του μαθητή.

Στο αρχείο StudentsList.jsx κάντε αλλαγές στον κώδικα για τα dispStudents, όπως φαίνεται στο μάθημα.

Κάντε τον σύνδεσμο 'Students' στο αριστερό μενού να οδηγεί στη σελίδα με τη λίστα των μαθητών. Ελέγξτε ότι όλα λειτουργούν.

Παρατηρήστε πώς θα αλλάζει η τιμή στη γραμμή διευθύνσεων του browser, ανάλογα με το σε ποια σελίδα βρίσκεστε αυτήν τη στιγμή.