Oletko koskaan huomannut niitä pieniä tekstinpätkiä joillakin verkkosivustoilla, jotka ilmaisevat nykyisen sijaintisi sivustolla? Niitä kutsutaan polkupoluiksi, ja ne voivat olla hyödyllinen tapa suunnata käyttäjiä, etenkin kun selaat monimutkaisia ​​verkkosivustoja. Tässä artikkelissa kerrotaan, kuinka voit luoda vaihemerkkejä React.js: ssä.

Mitä ovat korppujauhot ja kuinka tärkeitä ne ovat?

Tarkkuuspolut ovat yleensä pieniä tekstinpätkiä, jotka osoittavat nykyisen sijainnin verkkosivustolla. Niistä voi olla apua käyttäjien suuntaamisessa, etenkin kun selaat useita sivuja sisältäviä verkkosivustoja. Linkkipolun avulla navigointipolut voivat auttaa käyttäjiä ymmärtämään, missä he ovat verkkosivustolla, ja antaa heille mahdollisuuden siirtyä helposti takaisin edellisiin osioihin.

On tärkeää huomata, että korupolttoa ei tule käyttää ensisijaisena navigointikeinona verkkosivustolla. Pikemminkin niitä tulisi käyttää muiden navigointielementtien, kuten valikon tai hakupalkin, lisäksi.

Reaktiopolkujen luominen React.js: ssä

instagram viewer

React.js: ssä on kaksi päätapaa luoda navigointipolkuja: käyttämällä react-router-dom kirjastosta tai käyttämällä käytä-reagoi-reititin-muruja kirjasto. Mutta ennen kuin aloitat, sinun on tehtävä luo React-sovellus.

Tapa 1: Käyttämällä react-router-dom-kirjastoa

React-router-dom-kirjaston avulla voit luoda manuaalisesti reittipolkuja jokaiselle React-sovelluksesi polulle. Kirjasto tarjoaa a komponentti, jota voidaan käyttää korppujauhojen luomiseen.

Jos haluat käyttää react-router-dom -kirjastoa, sinun on ensin asennettava se npm: llä:

npm Asentaa react-router-dom

Kun kirjasto on asennettu, voit tuoda sen React-komponenttiin:

tuonti { Linkki } alkaen "react-router-dom"

Voit sitten käyttää komponentti leivänmurujen luomiseen:

<Linkki ="/">Koti</Link>
<Linkki ="/products">Tuotteet</Link>
<Linkki ="/products/1">Tuote 1</Link>

Nyt voit lisätä tyyliä vaihemerkkiin ja korostaa nykyisen sivun, jolla olet. Tätä varten voit käyttää luokan nimi prop of komponentti. Saat nykyisen polun nimen käyttämällä sijainti objekti react-router-dom-kirjastosta:

tuonti { Link, useLocation } alkaen "react-router-dom"
toimintokorppujauhoja() {
konst sijainti = useLocation();
palata (
<nav>
<Linkki ="/"
 className={sijainti.polkunimi "/"? "korppujauho aktiivinen": "leivänmuru-ei-aktiivinen"}
>
 Koti
</Link>
<Linkki ="/products"
 className={location.pathname.startsWith("/products")? "korppujauho aktiivinen": "leivänmuru-ei-aktiivinen"}
>
 Tuotteet
</Link>
<Linkki ="/products/1"
 className={sijainti.polkunimi "/products/1"? "korppujauho aktiivinen": "leivänmuru-ei-aktiivinen"}
>
 Tuote 1
</Link>
</nav>
 );
}
viedäoletuksena korppujauhot;

Luo nyt uusi CSS-tiedosto ja nimeä se korppujauhot.css. Lisää tiedostoon seuraavat CSS-säännöt:

.bradcrumb-not-active {
 väri: #cccccc;
}
.bradcrumb-active {
 väri: #000000;
}
.bradcrumb-nuoli {
 marginaali vasen: 10px;
 marginaali-oikea: 10px;
}

Tuo nyt CSS-tiedostosi React-komponenttiin ja lisää leivänmuru-nuoli luokkasi sinulle komponentit:

tuonti { Link, useLocation } alkaen "react-router-dom"
tuonti "./breadcrumbs.css";
toimintokorppujauhoja() {
konst sijainti = useLocation();
palata (
<nav>
<Linkki ="/"
 className={sijainti.polkunimi "/"? "korppujauho aktiivinen": "leivänmuru-ei-aktiivinen"}
>
 Koti
</Link>
<span className="leivänmuru-nuoli">&gt;</span>
<Linkki ="/products"
 className={location.pathname.startsWith("/products")? "korppujauho aktiivinen": "leivänmuru-ei-aktiivinen"}
>
 Tuotteet
</Link>
<span className="leivänmuru-nuoli">&gt;</span>
<Linkki ="/products/1"
 className={sijainti.polkunimi "/products/1"? "korppujauho aktiivinen": "leivänmuru-ei-aktiivinen"}
>
 Tuote 1
</Link>
</nav>
 );
}
viedäoletuksena korppujauhot;

On erilaisia ​​koukkuja Reactissa. React-router-dom -kirjasto useLocation koukku antaa sinulle pääsyn sijaintiobjektiin, jossa on tietoa nykyisestä URL-polusta.

The komponentin className prop lisää CSS-luokan linkkipolkuihin. ClassName-ehdotus ottaa merkkijonon tai merkkijonojoukon. Jos se on merkkijono, se lisää merkkijonon yhtenä luokkana elementtiin. Jos se on merkkijonojoukko, jokainen taulukon merkkijono lisätään erillisenä luokkana.

The alkaa kanssa menetelmä tarkistaa, alkaako nykyinen polku "/products". Tämä johtuu siitä, että tuotesivun navigointipolun tulisi olla aktiivinen paitsi silloin, kun polku on "/tuotteet", vaan myös silloin, kun polku on "/tuotteet/1", "/tuotteet/2" jne.

Tapa 2: Käyttämällä use-react-router-breadcrumbs -kirjastoa

Toinen tapa luoda reittipolkuja Reactissa on käyttää use-react-router-breadcrumbs -kirjastoa. Tämä kirjasto luo automaattisesti navigointipolkuja React-sovelluksessasi määritettyjen reittien perusteella.

Jotta voit käyttää tätä kirjastoa, sinun on ensin asennettava se npm: llä:

npm Asentaakäyttää-react-reititin-muruja

Kun kirjasto on asennettu, voit tuoda sen React-komponenttiin:

tuonti käytä koruja alkaen "use-react-router-breadcrumbs"

Voit sitten käyttää käytä koruja koukku korppujauhojen luomiseen:

konst korppumurut = useBreadcrumbs();
konsoli.log (korppujauhot);

Tämä kirjaa konsoliin joukon navigointipolkuobjekteja. Jokainen reittimerkkiobjekti sisältää tietoja reitistä, kuten nimen, polun ja parametrit.

Nyt voit renderöidä vaihemerkit näytölle. Voit käyttää komponentti react-router-kirjastosta, jotta voit luoda reittipolkuja:

tuonti { Linkki } alkaen "react-router-dom"
tuonti käytä koruja alkaen "use-react-router-breadcrumbs"
konst reitit = [
 { polku: '/users/:userId', leivänmuru: 'Esimerkki 1' },
 { polku: '/data', leivänmuru: 'Esimerkki 2' }
];
toimintokorppujauhoja() {
konst korppumurut = useBreadcrumbs (reitit);
konsoli.log (korppumurut)
palata (
<nav>
 {breadcrumbs.map(({ ottelu, polkupolku }) => (
<Link key={match.url} to={match.url}>
 {breadcrumb} /
</Link>
 ))}
</nav>
 );
}
viedäoletuksena korppujauhot;

Linkki-komponentti tuodaan react-router-dom-kirjastosta. Käytät tätä komponenttia linkkien luomiseen sovelluksen muihin osiin. Voit myös luoda suojattuja reittejä käyttämällä Link-komponenttia.

Luodaan joukko reittiobjekteja. Jokainen reittiobjekti sisältää polun ja reittipolkuominaisuuden. Polku-ominaisuus vastaa URL-polkua ja vaihemerkkiominaisuus vastaa vaihepolun nimeä.

The käytä koruja koukkua käytetään korppujauhojen luomiseen. Tämä koukku hyväksyy joukon reittejä parametrina. Reittejä käytetään leivänmurujen luomiseen.

Karttamenetelmää käytetään iteroitaessa leivänmuruja. Jokaiselle leivänmurulle a komponentti luodaan. Link-komponentissa on a to prop, joka vastaa vaihepolun URL-polkua. Itse navigointipolku hahmonnetaan sisällön sisällöksi komponentti.

Nyt voit lisätä korppujauhoihin hieman tyyliä. Luo uusi CSS-tiedosto ja nimeä se Breadcrumbs.css. Lisää sen jälkeen tiedostoon seuraavat CSS-säännöt:

.bradcrumb-not-active {
 väri: #cccccc;
}
.bradcrumb-active {
 väri: #000000;
}

Nyt voit tuoda CSS-tiedoston React-komponenttiin ja lisätä navigointipolku luokkiin komponentit:

tuonti { Link, useLocation } alkaen "react-router-dom"
tuonti käytä koruja alkaen "use-react-router-breadcrumbs"
tuonti "./Breadcrumbs.css";
konst reitit = [
 { polku: '/users/:userId', leivänmuru: 'Esimerkki 1' },
 { polku: '/data', leivänmuru: 'Esimerkki 2' }
];
toimintokorppujauhoja() {
konst korppumurut = useBreadcrumbs (reitit);
konst sijainti = käytäSijainti()
palata (
<nav>
 {breadcrumbs.map(({ ottelu, polkupolku }) => (
<Linkki 
 avain={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "korppujauho aktiivinen": "leivänmuru-ei-aktiivinen"}
>
 {breadcrumb} / 
</Link>
 ))}
</nav>
 );
}
viedäoletuksena korppujauhot;

Lisää käyttäjien sitoutumista vaihemurtuihin

Navigointipolkujen avulla voit paitsi auttaa käyttäjiä ymmärtämään, missä he ovat verkkosivustollasi, myös lisätä käyttäjien sitoutumista. Tarkkuuspolkuja voidaan käyttää näyttämään käyttäjän edistymistä tehtävässä, kuten kirjautumisprosessissa tai ostossa. Näyttämällä käyttäjän edistymisen voit rohkaista häntä suorittamaan tehtävän.

On myös monia muita asioita, jotka sinun tulee pitää mielessä verkkosivustoa suunniteltaessa, kuten käytettävyys, saavutettavuus ja mobiiliystävällisyys. Jos kuitenkin pidät nämä asiat mielessä, voit luoda verkkosivuston, joka on sekä käyttäjäystävällinen että mukaansatempaava.