Επισήμανση ενεργού συνδέσμου στο React Router

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

Για αρχή πηγαίνετε στην κύρια σελίδα, προσθέστε στη λίστα 4 προϊόντα και για καθένα από αυτά εισάγετε τα δεδομένα. Δώστε τους οποιαδήποτε ονόματα.

Στην επισήμανση του ενεργού συνδέσμου θα μας βοηθήσει το στοιχείο NavLink, αυτό είναι ένας τύπος του στοιχείου Link, που γνωρίζει για την κατάσταση των δεδομένων. Συνήθως χρησιμοποιείται όταν δημιουργούμε ένα μενού πλοήγησης.

Ας ανοίξουμε το root.jsx και να εισάγουμε το NavLink (μην ξεχάσετε να αφαιρέσετε την εισαγωγή του Link, γιατί το React μπορεί να παραπονεθεί, αφού δεν το χρησιμοποιούμε πια):

import { NavLink } from 'react-router-dom';

Στη συνέχεια, στο layout αντικαθιστούμε το στοιχείο Link με NavLink:

<NavLink key={product.id} to={`products/${product.id}`}>
	{product.name ? product.name : <i>unnamed</i>}
</NavLink>

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

<NavLink
	key={product.id}
	to={`products/${product.id}`}
	className={({ isActive, isPending }) =>
		isActive ? 'active' : isPending ? 'loading' : ''
	}
>
	{product.name ? product.name : <i>Unnamed</i>}
</NavLink>

Απομένει να προσθέσουμε στυλ για τις κλάσεις active και loading στο αρχείο css μας:

a.active {
	font-weight: bold;
	color: brown;
}

a.loading {
	color: gray;
}

Έτοιμο! Τώρα κάντε κλικ στα προϊόντα στη λίστα.

Πάρτε την εφαρμογή που δημιουργήσατε στις ασκήσεις των προηγούμενων μαθημάτων. Χρησιμοποιώντας το υλικό του μαθήματος, υλοποιήστε σε αυτήν την επισήμανση του ενεργού συνδέσμου για τη λίστα των φοιτητών έτσι, ώστε να είναι ξεκάθαρο τα δεδομένα ποιου φοιτητή βλέπει αυτήν τη στιγμή ο χρήστης.