Προσθήκη άλλης μιας διαδρομής στο React Router

Έχουμε τη βασική διαδρομή που οδηγεί στην κύρια σελίδα, όπου έχουμε συνδέσμους για προϊόντα. Ας προσθέσουμε τώρα άλλη μια διαδρομή, ώστε όταν κάνουμε κλικ σε έναν από τους συνδέσμους να εμφανίζεται η σελίδα για το προϊόν, και όχι η οθόνη σφάλματος.

Για αρχή ας ανοίξουμε την εφαρμογή μας, που φτιάξαμε σε προηγούμενα μαθήματα και ας δημιουργήσουμε στο φάκελο routes το αρχείο product.jsx. Ας φτιάξουμε σε αυτό το component Product:

function Product() {}

export default Product;

Τώρα ας δημιουργήσουμε μέσα στο Product ένα αντικείμενο product, με ιδιότητες name, cost και amount, προς το παρόν αυτές θα είναι κάποιες σταθερές τιμές:

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

Και στη σελίδα του προϊόντος θα εμφανίζουμε, αντίστοιχα, το όνομά του, το κόστος και την ποσότητα:

return (
	<div>
		<h2>Σελίδα Προϊόντος</h2>
		<p>Όνομα: {product.name}</p>
		<p>Κόστος: {product.cost}</p>
		<p>Ποσότητα: {product.amount}</p>
	</div>
);

Βεβαιωθείτε να προσθέσετε την εισαγωγή του component Product στο αρχείο main.jsx:

import Product from './routes/product';

Και, τελικά, ας προσθέσουμε άλλη μια διαδρομή στην εφαρμογή μας, ας το κάνουμε αμέσως μετά τη βασική. Ως διαδρομή ορίζουμε 'products/:productId', και ως στοιχείο για εμφάνιση είναι το component Product:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

Και τώρα εκκινούμε την εφαρμογή, κάνουμε κλικ στους συνδέσμους και βρισκόμαστε στη σελίδα του προϊόντος (προς το παρόν είναι ίδια για όλους τους συνδέσμους), και όχι σε σφάλμα.

Πάρτε την εφαρμογή που δημιουργήσατε στα αποτελέσματα των προηγούμενων μαθημάτων. Χρησιμοποιώντας το υλικό του μαθήματος, δημιουργήστε με παρόμοιο τρόπο το αρχείο student.jsx, ας εμφανίζεται στη σελίδα του φοιτητή το όνομά του, το επίθετό του, το έτος εισαγωγής και η ειδικότητά του. Προσθέστε μια νέα διαδρομή για τη σελίδα του φοιτητή στο αρχείο main.jsx, ορίστε την τιμή path σε 'students/:studentId'. Βεβαιωθείτε ότι όταν κάνετε κλικ στους συνδέσμους φτάνετε τώρα στη σελίδα του φοιτητή.