Έχετε παρατηρήσει ποτέ αυτά τα μικρά κομμάτια κειμένου σε ορισμένους ιστότοπους που υποδηλώνουν την τρέχουσα τοποθεσία σας μέσα στον ιστότοπο; Αυτά ονομάζονται ψίχουλα και μπορούν να είναι ένας χρήσιμος τρόπος προσανατολισμού των χρηστών, ειδικά κατά την πλοήγηση σε πολύπλοκους ιστότοπους. Αυτό το άρθρο θα σας δείξει πώς να δημιουργείτε breadcrumbs στο React.js.

Τι είναι τα Breadcrumbs και πόσο σημαντικά είναι;

Τα Breadcrumbs είναι συνήθως μικρά κομμάτια κειμένου που δείχνουν την τρέχουσα τοποθεσία σε έναν ιστότοπο. Μπορούν να βοηθήσουν στον προσανατολισμό των χρηστών, ειδικά κατά την πλοήγηση σε ιστότοπους με πολλές σελίδες. Παρέχοντας ένα ίχνος συνδέσμων, το breadcrumbs μπορεί να βοηθήσει τους χρήστες να κατανοήσουν πού βρίσκονται μέσα σε έναν ιστότοπο και να τους επιτρέψουν να πλοηγηθούν πίσω στις προηγούμενες ενότητες εύκολα.

Είναι σημαντικό να σημειωθεί ότι το breadcrumbs δεν πρέπει να χρησιμοποιείται ως το κύριο μέσο πλοήγησης σε έναν ιστότοπο. Αντίθετα, θα πρέπει να χρησιμοποιούνται επιπλέον σε άλλα στοιχεία πλοήγησης, όπως ένα μενού ή μια γραμμή αναζήτησης.

instagram viewer

Πώς να δημιουργήσετε Breadcrumbs στο React.js

Υπάρχουν δύο κύριοι τρόποι για να δημιουργήσετε breadcrumbs στο React.js: χρησιμοποιώντας το react-router-dom βιβλιοθήκη ή χρησιμοποιώντας το use-react-router-breadcrumbs βιβλιοθήκη. Αλλά πριν ξεκινήσετε, πρέπει δημιουργήστε μια εφαρμογή React.

Μέθοδος 1: Χρησιμοποιώντας τη βιβλιοθήκη react-router-dom

Με τη βιβλιοθήκη react-router-dom, μπορείτε να δημιουργήσετε με μη αυτόματο τρόπο breadcrumbs για κάθε διαδρομή στην εφαρμογή React σας. Η βιβλιοθήκη παρέχει α συστατικό που μπορεί να χρησιμοποιηθεί για τη δημιουργία φρυγανιάς.

Για να χρησιμοποιήσετε τη βιβλιοθήκη react-router-dom, πρέπει πρώτα να την εγκαταστήσετε χρησιμοποιώντας npm:

npm εγκαθιστώ react-router-dom

Αφού εγκατασταθεί η βιβλιοθήκη, μπορείτε να την εισαγάγετε στο στοιχείο React:

εισαγωγή { Σύνδεσμος } από 'react-router-dom'

Στη συνέχεια, μπορείτε να χρησιμοποιήσετε το συστατικό για τη δημιουργία φρυγανιάς:

<Σύνδεσμος προς="/">Σπίτι</Link>
<Σύνδεσμος προς="/products">Προϊόντα</Link>
<Σύνδεσμος προς="/products/1">Προϊόν 1</Link>

Τώρα, μπορείτε να προσθέσετε κάποιο στυλ στα ψίχουλα και να επισημάνετε την τρέχουσα σελίδα στην οποία βρίσκεστε. Για αυτό, μπορείτε να χρησιμοποιήσετε το όνομα τάξης στήριγμα του συστατικό. Για να λάβετε το τρέχον όνομα διαδρομής, μπορείτε να χρησιμοποιήσετε το τοποθεσία αντικείμενο από τη βιβλιοθήκη react-router-dom:

εισαγωγή { Link, useLocation } από 'react-router-dom'
λειτουργίαΤριμμένη φρυγανιά() {
συνθ location = useLocation();
ΕΠΙΣΤΡΟΦΗ (
<nav>
<Σύνδεσμος προς="/"
 className={location.pathname "/"? "τριμμένη φρυγανιά": "φρυγανιά-μη-ενεργός"}
>
 Σπίτι
</Link>
<Σύνδεσμος προς="/products"
 className={location.pathname.startsWith("/products")? "τριμμένη φρυγανιά": "φρυγανιά-μη-ενεργός"}
>
 Προϊόντα
</Link>
<Σύνδεσμος προς="/products/1"
 className={location.pathname "/products/1"? "τριμμένη φρυγανιά": "φρυγανιά-μη-ενεργός"}
>
 Προϊόν 1
</Link>
</nav>
 );
}
εξαγωγήΠροκαθορισμένο Τριμμένη φρυγανιά;

Τώρα, δημιουργήστε ένα νέο αρχείο CSS και ονομάστε το τριμμένη φρυγανιά.css. Προσθέστε τους ακόλουθους κανόνες CSS στο αρχείο:

.breadcrumb-not-active {
 χρώμα: #cccccc;
}
.ψωμί-ενεργός {
 χρώμα: #000000;
}
.ψωμί-βέλος {
 περιθώριο-αριστερά: 10 px;
 margin-right: 10px;
}

Τώρα, εισαγάγετε το αρχείο CSS στο στοιχείο React και προσθέστε το φρυγανιά-βέλος τάξη σε σας συστατικά:

εισαγωγή { Link, useLocation } από 'react-router-dom'
εισαγωγή "./breadcrumbs.css";
λειτουργίαΤριμμένη φρυγανιά() {
συνθ location = useLocation();
ΕΠΙΣΤΡΟΦΗ (
<nav>
<Σύνδεσμος προς="/"
 className={location.pathname "/"? "τριμμένη φρυγανιά": "φρυγανιά-μη-ενεργός"}
>
 Σπίτι
</Link>
<span className="φρυγανιά-βέλος">&gt;</span>
<Σύνδεσμος προς="/products"
 className={location.pathname.startsWith("/products")? "τριμμένη φρυγανιά": "φρυγανιά-μη-ενεργός"}
>
 Προϊόντα
</Link>
<span className="φρυγανιά-βέλος">&gt;</span>
<Σύνδεσμος προς="/products/1"
 className={location.pathname "/products/1"? "τριμμένη φρυγανιά": "φρυγανιά-μη-ενεργός"}
>
 Προϊόν 1
</Link>
</nav>
 );
}
εξαγωγήΠροκαθορισμένο Τριμμένη φρυγανιά;

Υπάρχουν διαφορετικοί τύποι αγκίστρων στο React. Η βιβλιοθήκη του react-router-dom χρήσηΤοποθεσία Το hook σάς δίνει πρόσβαση στο αντικείμενο τοποθεσίας, το οποίο έχει πληροφορίες σχετικά με την τρέχουσα διαδρομή URL.

ο Το prop className του συστατικού προσθέτει μια κλάση CSS στο breadcrumbs. Το prop className παίρνει μια συμβολοσειρά ή μια σειρά από συμβολοσειρές. Εάν είναι συμβολοσειρά, θα προσθέσει τη συμβολοσειρά ως μία κλάση στο στοιχείο. Εάν είναι ένας πίνακας συμβολοσειρών, κάθε συμβολοσειρά στον πίνακα θα προστεθεί ως ξεχωριστή κλάση.

ο ξεκινάει με Η μέθοδος ελέγχει εάν το τρέχον όνομα διαδρομής ξεκινά με "/products". Αυτό συμβαίνει επειδή το breadcrumb για τη σελίδα προϊόντων θα πρέπει να είναι ενεργό όχι μόνο όταν η διαδρομή είναι "/products", αλλά και όταν η διαδρομή είναι "/products/1", "/products/2" κ.λπ.

Μέθοδος 2: Χρησιμοποιώντας τη βιβλιοθήκη use-react-router-breadcrumbs

Ένας άλλος τρόπος για να δημιουργήσετε breadcrumbs στο React είναι χρησιμοποιώντας τη βιβλιοθήκη use-react-router-breadcrumbs. Αυτή η βιβλιοθήκη δημιουργεί αυτόματα breadcrumbs με βάση τις διαδρομές που ορίζονται στην εφαρμογή React.

Για να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη, θα πρέπει πρώτα να την εγκαταστήσετε χρησιμοποιώντας npm:

npm εγκαθιστώχρήση-react-router-breadcrumbs

Αφού εγκατασταθεί η βιβλιοθήκη, μπορείτε να την εισαγάγετε στο στοιχείο React:

εισαγωγή χρήση ψωμιού από 'use-react-router-breadcrumbs'

Στη συνέχεια, μπορείτε να χρησιμοποιήσετε το χρήση ψωμιού αγκίστρι για τη δημιουργία τριμμένης φρυγανιάς:

συνθ breadcrumbs = useBreadcrumbs();
κονσόλα.log (ψωμάκια);

Αυτό θα καταγράψει μια σειρά αντικειμένων breadcrumb στην κονσόλα. Κάθε αντικείμενο breadcrumb περιέχει πληροφορίες σχετικά με τη διαδρομή, όπως το όνομα, τη διαδρομή και τις παραμέτρους.

Τώρα, μπορείτε να αποδώσετε τη φρυγανιά σας στην οθόνη. Μπορείτε να χρησιμοποιήσετε το συστατικό από τη βιβλιοθήκη του react-router για να δημιουργήσετε το breadcrumbs σας:

εισαγωγή { Σύνδεσμος } από 'react-router-dom'
εισαγωγή χρήση ψωμιού από 'use-react-router-breadcrumbs'
συνθ διαδρομές = [
 { μονοπάτι: '/users/:userId', τριμμένη φρυγανιά: 'Παράδειγμα 1' },
 { μονοπάτι: '/data', τριμμένη φρυγανιά: 'Παράδειγμα 2' }
];
λειτουργίαΤριμμένη φρυγανιά() {
συνθ breadcrumbs = useBreadcrumbs (διαδρομές);
κονσόλα.log (ψίχουλες)
ΕΠΙΣΤΡΟΦΗ (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Κλειδί συνδέσμου={match.url} σε={match.url}>
 {breadcrumb} /
</Link>
 ))}
</nav>
 );
}
εξαγωγήΠροκαθορισμένο Τριμμένη φρυγανιά;

Το στοιχείο Link εισάγεται από τη βιβλιοθήκη react-router-dom. Θα χρησιμοποιήσετε αυτό το στοιχείο για να δημιουργήσετε συνδέσμους προς άλλα μέρη της εφαρμογής. Μπορείτε επίσης να δημιουργία προστατευμένων διαδρομών χρησιμοποιώντας το στοιχείο Link.

Δημιουργείται μια σειρά αντικειμένων διαδρομής. Κάθε αντικείμενο διαδρομής περιέχει μια διαδρομή και μια ιδιότητα breadcrumb. Η ιδιότητα διαδρομής αντιστοιχεί στη διαδρομή διεύθυνσης URL και η ιδιότητα breadcrumb αντιστοιχεί στο όνομα της ψίχας.

ο χρήση ψωμιού Ο γάντζος χρησιμοποιείται για τη δημιουργία της φρυγανιάς. Αυτό το άγκιστρο δέχεται μια σειρά διαδρομών ως παράμετρο. Οι διαδρομές χρησιμοποιούνται για τη δημιουργία του ψωμιού.

Η μέθοδος του χάρτη χρησιμοποιείται για την επανάληψη πάνω από τη σειρά των τριμμάτων φρυγανιάς. Για κάθε φρυγανιά, α δημιουργείται συστατικό. Το στοιχείο Link έχει ένα προς την prop, το οποίο αντιστοιχεί στη διαδρομή URL του ψαλιδιού. Η ίδια η φρυγανιά αποδίδεται ως το περιεχόμενο του συστατικό.

Τώρα μπορείτε να προσθέσετε λίγο styling στην τριμμένη φρυγανιά. Δημιουργήστε ένα νέο αρχείο CSS και ονομάστε το Breadcrumbs.css. Μετά από αυτό, προσθέστε τους ακόλουθους κανόνες CSS στο αρχείο:

.breadcrumb-not-active {
 χρώμα: #cccccc;
}
.ψωμί-ενεργός {
 χρώμα: #000000;
}

Τώρα, μπορείτε να εισαγάγετε το αρχείο CSS στο στοιχείο React και να προσθέσετε τις κλάσεις breadcrumb στο συστατικά:

εισαγωγή { Link, useLocation } από 'react-router-dom'
εισαγωγή χρήση ψωμιού από 'use-react-router-breadcrumbs'
εισαγωγή "./Breadcrumbs.css";
συνθ διαδρομές = [
 { μονοπάτι: '/users/:userId', τριμμένη φρυγανιά: 'Παράδειγμα 1' },
 { μονοπάτι: '/data', τριμμένη φρυγανιά: 'Παράδειγμα 2' }
];
λειτουργίαΤριμμένη φρυγανιά() {
συνθ breadcrumbs = useBreadcrumbs (διαδρομές);
συνθ τοποθεσία = useLocation()
ΕΠΙΣΤΡΟΦΗ (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Σύνδεσμος 
 key={match.url} 
 προς={match.url}
 className={match.pathname location.pathname? "τριμμένη φρυγανιά": "φρυγανιά-μη-ενεργός"}
>
 {breadcrumb} / 
</Link>
 ))}
</nav>
 );
}
εξαγωγήΠροκαθορισμένο Τριμμένη φρυγανιά;

Αυξήστε την αφοσίωση των χρηστών με το Breadcrumbs

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

Υπάρχουν επίσης πολλά άλλα πράγματα που πρέπει να έχετε κατά νου όταν σχεδιάζετε έναν ιστότοπο, όπως η χρηστικότητα, η προσβασιμότητα και η φιλικότητα προς κινητά. Ωστόσο, αν έχετε υπόψη σας αυτά τα πράγματα, μπορείτε να δημιουργήσετε έναν ιστότοπο που να είναι φιλικός προς το χρήστη και ελκυστικός.