Cum se creează breadcrumbs în React.js

Ați observat vreodată acele mici bucăți de text de pe unele site-uri web care indică locația dvs. actuală pe site? Acestea se numesc breadcrumbs și pot fi o modalitate utilă de orientare a utilizatorilor, mai ales atunci când navighează prin site-uri web complexe. Acest articol vă va arăta cum să creați breadcrumbs în React.js.

Ce sunt pesmeturile și cât de importante sunt acestea?

Breadcrumb-urile sunt de obicei mici bucăți de text care arată locația curentă într-un site web. Ele pot fi utile în orientarea utilizatorilor, mai ales atunci când navighează prin site-uri web care au mai multe pagini. Oferind o serie de link-uri, breadcrumb-urile pot ajuta utilizatorii să înțeleagă unde se află într-un site web și să le permită să navigheze înapoi la secțiunile anterioare cu ușurință.

Este important să rețineți că pesmeturile nu trebuie folosite ca mijloc principal de navigare pe un site web. Mai degrabă, ar trebui să fie utilizate în plus față de alte elemente de navigare, cum ar fi un meniu sau o bară de căutare.

Cum se creează breadcrumbs în React.js

Există două moduri principale de a crea breadcrumbs în React.js: prin utilizarea reacţionează-router-dom bibliotecă sau utilizând folosește-react-router-breadcrumbs bibliotecă. Dar înainte de a începe, trebuie creați o aplicație React.

Metoda 1: Prin utilizarea bibliotecii react-router-dom

Cu biblioteca react-router-dom, puteți crea manual breadcrumbs pentru fiecare cale din aplicația dvs. React. Biblioteca oferă a componentă care poate fi folosită pentru a crea pesmet.

Pentru a utiliza biblioteca react-router-dom, mai întâi trebuie să o instalați folosind npm:

npm instalare reacţionează-router-dom

Odată ce biblioteca a fost instalată, o puteți importa în componenta React:

import { Link } din „react-router-dom”

Apoi puteți utiliza componentă pentru a crea pesmet:

<Link către="/">Acasă</Link>
<Link către="/products">Produse</Link>
<Link către="/products/1">Produsul 1</Link>

Acum, puteți adăuga un stil pesmet și evidențiați pagina curentă pe care vă aflați. Pentru asta, puteți folosi numele clasei prop de la componentă. Pentru a obține calea curentă, puteți utiliza Locație obiect din biblioteca react-router-dom:

import { Link, useLocation } din „react-router-dom”
funcţieFirimituri de pâine() {
const locație = useLocation();
întoarcere (
<nav>
<Link către="/"
 className={location.pathname "/"? "breadcrumb-activ": "pesmet-inactiv"}
>
 Acasă
</Link>
<Link către="/products"
 className={location.pathname.startsWith("/products")? "breadcrumb-activ": "pesmet-inactiv"}
>
 Produse
</Link>
<Link către="/products/1"
 className={location.pathname "/products/1"? "breadcrumb-activ": "pesmet-inactiv"}
>
 Produsul 1
</Link>
</nav>
 );
}
exportMod implicit Firimituri de pâine;

Acum, creați un nou fișier CSS și denumiți-l pesmet.css. Adăugați următoarele reguli CSS la fișier:

.pesmet-nu-activ {
 culoare: #cccccc;
}
.breadcrumb-activ {
 culoare: #000000;
}
.săgeată-pesmet {
 margine-stânga: 10px;
 margine-dreapta: 10px;
}

Acum, importați fișierul CSS în componenta React și adăugați pesmet-săgeată clasa la dvs componente:

import { Link, useLocation } din „react-router-dom”
import "./breadcrumbs.css";
funcţieFirimituri de pâine() {
const locație = useLocation();
întoarcere (
<nav>
<Link către="/"
 className={location.pathname "/"? "breadcrumb-activ": "pesmet-inactiv"}
>
 Acasă
</Link>
<span className="pesmet-săgeată">&gt;</span>
<Link către="/products"
 className={location.pathname.startsWith("/products")? "breadcrumb-activ": "pesmet-inactiv"}
>
 Produse
</Link>
<span className="pesmet-săgeată">&gt;</span>
<Link către="/products/1"
 className={location.pathname "/products/1"? "breadcrumb-activ": "pesmet-inactiv"}
>
 Produsul 1
</Link>
</nav>
 );
}
exportMod implicit Firimituri de pâine;

Sunt diferite tipuri de cârlige în React. Bibliotecile react-router-dom useLocation hook vă oferă acces la obiectul locație, care conține informații despre calea URL curentă.

The prop className a componentei adaugă o clasă CSS la breadcrumbs. Propul className preia un șir sau o matrice de șiruri. Dacă este un șir, acesta va adăuga șirul ca o singură clasă la element. Dacă este o matrice de șiruri, fiecare șir din matrice se va adăuga ca o clasă separată.

The incepe cu metoda verifică dacă calea curentă începe cu „/products”. Acest lucru se datorează faptului că rubrica pentru pagina de produse ar trebui să fie activă nu numai atunci când calea este „/produse”, ci și atunci când calea este „/produse/1”, „/produse/2”, etc.

Metoda 2: Prin utilizarea bibliotecii use-react-router-breadcrumbs

O altă modalitate de a crea breadcrumbs în React este utilizarea bibliotecii use-react-router-breadcrumbs. Această bibliotecă generează automat breadcrumbs pe baza rutelor definite în aplicația dvs. React.

Pentru a utiliza această bibliotecă, mai întâi va trebui să o instalați folosind npm:

npm instalareutilizare-react-router-pesmet

Odată ce biblioteca a fost instalată, o puteți importa în componenta React:

import utilizați pesmet din „utilizați-react-router-breadcrumbs”

Apoi puteți utiliza utilizați pesmet cârlig pentru a crea pesmet:

const breadcrumbs = foloseșteBreadcrumbs();
consolă.log (pesmet);

Aceasta va înregistra o serie de obiecte breadcrumb în consolă. Fiecare obiect breadcrumb conține informații despre traseu, cum ar fi numele, calea și parametrii.

Acum, vă puteți afișa pesmeturile pe ecran. Puteți folosi componentă din biblioteca react-router pentru a vă crea breadcrumbs:

import { Link } din „react-router-dom”
import utilizați pesmet din „utilizați-react-router-breadcrumbs”
const rute = [
 { cale: '/users/:userId', pesmet: 'Exemplul 1' },
 { cale: '/data', pesmet: 'Exemplul 2' }
];
funcţieFirimituri de pâine() {
const breadcrumbs = foloseșteBreadcrumbs (rute);
consolă.log (pesmet)
întoarcere (
<nav>
 {breadcrumbs.map(({ potrivire, breadcrumb }) => (
<Link key={match.url} la={match.url}>
 {pesmet} /
</Link>
 ))}
</nav>
 );
}
exportMod implicit Firimituri de pâine;

Componenta Link este importată din biblioteca react-router-dom. Veți folosi această componentă pentru a crea legături către alte părți ale aplicației. Poti de asemenea creează rute protejate folosind componenta Link.

Este creată o serie de obiecte rută. Fiecare obiect rută conține o cale și o proprietate breadcrumb. Proprietatea cale corespunde căii URL, iar proprietatea breadcrumb corespunde numelui breadcrumb.

The utilizați pesmet cârligul este folosit pentru a crea pesmetul. Acest cârlig acceptă o serie de rute ca parametru. Rutele sunt folosite pentru a genera pesmetul.

Metoda hărții este utilizată pentru a repeta peste matricea de breadcrumbs. Pentru fiecare pesmet, a este creată componenta. Componenta Link are un la prop, care corespunde căii URL a breadcrumbului. Pesmetul în sine este redat ca conținut al componentă.

Acum puteți adăuga un pic de stil pesmetului. Creați un nou fișier CSS și denumiți-l Pesmet.css. După aceea, adăugați următoarele reguli CSS la fișier:

.pesmet-nu-activ {
 culoare: #cccccc;
}
.breadcrumb-activ {
 culoare: #000000;
}

Acum, puteți importa fișierul CSS în componenta React și puteți adăuga clasele de breadcrumb la componente:

import { Link, useLocation } din „react-router-dom”
import utilizați pesmet din „utilizați-react-router-breadcrumbs”
import "./Breadcrumbs.css";
const rute = [
 { cale: '/users/:userId', pesmet: 'Exemplul 1' },
 { cale: '/data', pesmet: 'Exemplul 2' }
];
funcţieFirimituri de pâine() {
const breadcrumbs = foloseșteBreadcrumbs (rute);
const locație = useLocation()
întoarcere (
<nav>
 {breadcrumbs.map(({ potrivire, breadcrumb }) => (
<Legătură 
 cheie={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "breadcrumb-activ": "pesmet-inactiv"}
>
 {pesmet} / 
</Link>
 ))}
</nav>
 );
}
exportMod implicit Firimituri de pâine;

Creșteți implicarea utilizatorilor cu breadcrumbs

Cu ajutorul breadcrumb-urilor, nu numai că puteți ajuta utilizatorii să înțeleagă unde se află pe site-ul dvs. web, dar puteți, de asemenea, să creșteți implicarea utilizatorilor. Pesmeturile pot fi folosite pentru a arăta progresul utilizatorului printr-o sarcină, cum ar fi un proces de înscriere sau o achiziție. Arătând progresul utilizatorului, îl puteți încuraja să finalizeze sarcina.

Există, de asemenea, multe alte lucruri pe care ar trebui să le țineți cont atunci când proiectați un site web, cum ar fi utilizarea, accesibilitatea și compatibilitatea cu dispozitivele mobile. Cu toate acestea, dacă țineți cont de aceste lucruri, puteți crea un site web care este atât ușor de utilizat, cât și captivant.