Kas olete kunagi märganud mõnel veebisaidil neid väikeseid tekstitükke, mis tähistavad teie praegust asukohta saidil? Neid nimetatakse leivakruntideks ja need võivad olla kasulikud viisid kasutajate orienteerumiseks, eriti keerulistel veebisaitidel navigeerimisel. See artikkel näitab, kuidas luua React.js-is leivakruusi.

Mis on riivsai ja kuidas need on olulised?

Katsed on tavaliselt väikesed tekstitükid, mis näitavad praegust asukohta veebisaidil. Need võivad olla abiks kasutajate orienteerumisel, eriti mitme leheküljega veebisaitidel navigeerimisel. Pakkudes linkide jälge, aitavad teeradad kasutajatel mõista, kus nad veebisaidil asuvad, ja võimaldavad neil hõlpsalt eelmiste jaotiste juurde tagasi liikuda.

Oluline on märkida, et riivsaia ei tohiks kasutada veebisaidil navigeerimiseks peamise vahendina. Pigem tuleks neid kasutada lisaks muudele navigeerimiselementidele, nagu menüü või otsinguriba.

Kuidas luua React.js'is leivapuru

React.js-is on leivakruusi loomiseks kaks peamist viisi: kasutades

instagram viewer
reageerida-ruuter-dom raamatukogu või kasutades kasuta-reageeri-ruuterit-leivapuru raamatukogu. Kuid enne alustamist peate seda tegema looge rakendus React.

1. meetod: kasutades react-ruuter-dom raamatukogu

Teegi react-ruuter-dom abil saate oma Reacti rakenduses iga tee jaoks käsitsi luua teekonnad. Raamatukogu pakub a komponent, mida saab kasutada riivsaia valmistamiseks.

React-ruuter-dom teegi kasutamiseks peate selle esmalt installima npm abil:

npm installida reageerida-ruuter-dom

Kui teek on installitud, saate selle importida oma Reacti komponenti.

importida { Link } alates 'react-ruuter-dom'

Seejärel saate kasutada komponent riivsaia loomiseks:

<Link ="/">Kodu</Link>
<Link ="/products">Tooted</Link>
<Link ="/products/1">Toode 1</Link>

Nüüd saate lisada leivale stiili ja tõsta esile praeguse lehe, millel olete. Selleks saate kasutada klassi nimi prop of the komponent. Praeguse teenime saamiseks võite kasutada asukoht objekt react-ruuter-dom teegist:

importida { Link, useLocation } alates 'react-ruuter-dom'
funktsiooniRiivsai() {
konst asukoht = useLocation();
tagasi (
<nav>
<Link ="/"
 className={asukoha.teenimi "/"? "riivsaia-aktiivne": "riivsai-mitteaktiivne"}
>
 Kodu
</Link>
<Link ="/products"
 className={location.pathname.startsWith("/products")? "riivsaia-aktiivne": "riivsai-mitteaktiivne"}
>
 Tooted
</Link>
<Link ="/products/1"
 className={asukoha.teenimi "/products/1"? "riivsaia-aktiivne": "riivsai-mitteaktiivne"}
>
 Toode 1
</Link>
</nav>
 );
}
eksportidavaikimisi riivsai;

Nüüd looge uus CSS-fail ja nimetage see riivsai.css. Lisage failile järgmised CSS-reeglid:

.breadcrumb-ei-aktiivne {
 värv: #cccccc;
}
.leivapuru-aktiivne {
 värv: #000000;
}
.riivapuru-nool {
 veeris vasak: 10 pikslit;
 veeris-parem: 10px;
}

Nüüd importige oma CSS-fail oma Reacti komponenti ja lisage riivsai-nool klassi omale komponendid:

importida { Link, useLocation } alates 'react-ruuter-dom'
importida "./breadcrumbs.css";
funktsiooniRiivsai() {
konst asukoht = useLocation();
tagasi (
<nav>
<Link ="/"
 className={asukoha.teenimi "/"? "riivsaia-aktiivne": "riivsai-mitteaktiivne"}
>
 Kodu
</Link>
<span className="riivsai-nool">&gt;</span>
<Link ="/products"
 className={location.pathname.startsWith("/products")? "riivsaia-aktiivne": "riivsai-mitteaktiivne"}
>
 Tooted
</Link>
<span className="riivsai-nool">&gt;</span>
<Link ="/products/1"
 className={asukoha.teenimi "/products/1"? "riivsaia-aktiivne": "riivsai-mitteaktiivne"}
>
 Toode 1
</Link>
</nav>
 );
}
eksportidavaikimisi riivsai;

Seal on erinevat tüüpi konksud Reactis. React-ruuter-dom raamatukogu useLocation konks annab juurdepääsu asukohaobjektile, millel on teave praeguse URL-i tee kohta.

The komponendi className prop lisab leivale CSS-klassi. Rekvisiit ClassName võtab stringi või stringide massiivi. Kui see on string, lisab see stringi elemendile ühe klassina. Kui see on stringide massiiv, lisatakse iga massiivi string eraldi klassina.

The algab meetod kontrollib, kas praegune teenimi algab tähega "/products". Selle põhjuseks on asjaolu, et toodete lehe teeriba peaks olema aktiivne mitte ainult siis, kui tee on "/tooted", vaid ka siis, kui tee on "/products/1", "/products/2" jne.

2. meetod: kasutades teeki use-react-ruuter-breadcrumbs

Teine võimalus Reactis leivakruusi loomiseks on kasutada teeki use-react-ruuter-react. See teek loob teie Reacti rakenduses määratletud marsruutide põhjal automaatselt leivad.

Selle teegi kasutamiseks peate selle esmalt installima npm abil:

npm installidakasutada-react-ruuter-leivapuru

Kui teek on installitud, saate selle importida oma Reacti komponenti.

importida kasuta leivapuru alates "kasuta-reageeri-ruuterit-leivapuru"

Seejärel saate kasutada kasuta leivapuru konks riivsaia loomiseks:

konst leivapuru = useBreadcrumbs();
konsool.log (riivapuru);

See logib konsooli massiivi riivteeobjekte. Iga leivatee objekt sisaldab teavet marsruudi kohta, nagu nimi, tee ja parameetrid.

Nüüd saate oma leivapuru ekraanile renderdada. Võite kasutada React-ruuteri teegi komponent, et luua oma leivakruusid:

importida { Link } alates 'react-ruuter-dom'
importida kasuta leivapuru alates "kasuta-reageeri-ruuterit-leivapuru"
konst marsruudid = [
 { tee: '/users/:userId', riivsai: 'Näide 1' },
 { tee: '/data', riivsai: 'Näide 2' }
];
funktsiooniRiivsai() {
konst leivapuru = useBreadcrumbs (marsruudid);
konsool.log (leivapuru)
tagasi (
<nav>
 {breadcrumbs.map(({ vaste, leivapuru }) => (
<Link key={match.url} to={match.url}>
 {breadcrumb} /
</Link>
 ))}
</nav>
 );
}
eksportidavaikimisi riivsai;

Link komponent imporditakse teegist react-router-dom. Selle komponendi abil saate luua linke rakenduse teistele osadele. Sa saad ka luua kaitstud marsruute kasutades linki komponenti.

Luuakse marsruudiobjektide massiiv. Iga marsruudiobjekt sisaldab teed ja leivatee atribuuti. Tee atribuut vastab URL-i teele ja leiutee atribuut rööptee nimele.

The kasuta leivapuru riivsaia valmistamiseks kasutatakse konksu. See konks aktsepteerib parameetrina marsruute. Marsruute kasutatakse riivsaia genereerimiseks.

Kaardimeetodit kasutatakse riivsaia massiivi kordamiseks. Iga riivsaia kohta a komponent luuakse. Link komponendil on a juurde prop, mis vastab leiutee URL-i teele. Leivakübar ise renderdatakse sisuna komponent.

Nüüd saate lisada riivsaiale veidi stiili. Looge uus CSS-fail ja nimetage see Breadcrumbs.css. Pärast seda lisage faili järgmised CSS-reeglid:

.breadcrumb-ei-aktiivne {
 värv: #cccccc;
}
.leivapuru-aktiivne {
 värv: #000000;
}

Nüüd saate importida CSS-faili Reacti komponenti ja lisada teeraja klassid komponendid:

importida { Link, useLocation } alates 'react-ruuter-dom'
importida kasuta leivapuru alates "kasuta-reageeri-ruuterit-leivapuru"
importida "./Breadcrumbs.css";
konst marsruudid = [
 { tee: '/users/:userId', riivsai: 'Näide 1' },
 { tee: '/data', riivsai: 'Näide 2' }
];
funktsiooniRiivsai() {
konst leivapuru = useBreadcrumbs (marsruudid);
konst asukoht = kasutuskoht()
tagasi (
<nav>
 {breadcrumbs.map(({ vaste, leivapuru }) => (
<Link 
 võti={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "riivsaia-aktiivne": "riivsai-mitteaktiivne"}
>
 {breadcrumb} / 
</Link>
 ))}
</nav>
 );
}
eksportidavaikimisi riivsai;

Suurendage kasutajate seotust leivapuruga

Teemargi abil saate mitte ainult aidata kasutajatel mõista, kus nad teie veebisaidil asuvad, vaid saate ka suurendada kasutajate seotust. Katsetükke saab kasutada selleks, et näidata kasutaja edenemist ülesande (nt registreerumisprotsessi või ostu) käigus. Näidates kasutaja edusamme, saate julgustada teda ülesannet täitma.

Samuti on palju muid asju, mida peaksite veebisaidi kujundamisel silmas pidama, näiteks kasutatavus, juurdepääsetavus ja mobiilisõbralikkus. Kui aga neid asju meeles pidada, saate luua veebisaidi, mis on nii kasutajasõbralik kui ka kaasahaarav.