Ste že kdaj opazili majhne koščke besedila na nekaterih spletnih mestih, ki označujejo vašo trenutno lokacijo na spletnem mestu? Imenujejo se drobtinice in so lahko koristen način za orientacijo uporabnikov, zlasti pri krmarjenju po zapletenih spletnih mestih. Ta članek vam bo pokazal, kako ustvariti drobtine v React.js.

Kaj so drobtine in kako so pomembne?

Drobtine so običajno majhni delčki besedila, ki prikazujejo trenutno lokacijo na spletnem mestu. Lahko so v pomoč pri orientaciji uporabnikov, zlasti pri navigaciji po spletnih mestih z več stranmi. Z zagotavljanjem sledi povezav lahko drobtine pomagajo uporabnikom razumeti, kje so na spletnem mestu, in jim omogočijo preprosto krmarjenje nazaj na prejšnje razdelke.

Pomembno je vedeti, da se drobtinice ne smejo uporabljati kot glavno sredstvo za navigacijo na spletnem mestu. Uporabljati jih je treba poleg drugih navigacijskih elementov, kot sta meni ali iskalna vrstica.

Kako ustvariti drobtine v React.js

Obstajata dva glavna načina za ustvarjanje drobtin v React.js: z uporabo

instagram viewer
reagirati-usmerjevalnik-dom knjižnico ali z uporabo use-react-router-drobtine knjižnica. Toda preden začnete, morate ustvarite aplikacijo React.

1. način: z uporabo knjižnice react-router-dom

S knjižnico react-router-dom lahko ročno ustvarite drobtine za vsako pot v svoji aplikaciji React. Knjižnica nudi a komponento, ki jo lahko uporabite za ustvarjanje drobtin.

Če želite uporabljati knjižnico react-router-dom, jo ​​morate najprej namestiti z uporabo npm:

npm namestite reagirati-usmerjevalnik-dom

Ko je knjižnica nameščena, jo lahko uvozite v svojo komponento React:

uvoz { Povezava } od 'react-router-dom'

Nato lahko uporabite komponenta za ustvarjanje drobtin:

<Povezava do="/">domov</Link>
<Povezava do="/products">Izdelki</Link>
<Povezava do="/products/1">Izdelek 1</Link>

Zdaj lahko drobtinam dodate nekaj sloga in označite trenutno stran, na kateri ste. Za to lahko uporabite className rekvizit za komponento. Če želite pridobiti trenutno ime poti, lahko uporabite lokacijo objekt iz knjižnice react-router-dom:

uvoz { Link, useLocation } od 'react-router-dom'
funkcijoKrušne drobtine() {
konst lokacija = useLocation();
vrnitev (
<nav>
<Povezava do="/"
 className={location.pathname "/"? "Breadcrumb-active": "drobtinica-ni-aktivna"}
>
 domov
</Link>
<Povezava do="/products"
 className={location.pathname.startsWith("/products")? "Breadcrumb-active": "drobtinica-ni-aktivna"}
>
 Izdelki
</Link>
<Povezava do="/products/1"
 className={location.pathname "/products/1"? "Breadcrumb-active": "drobtinica-ni-aktivna"}
>
 Izdelek 1
</Link>
</nav>
 );
}
izvozprivzeto Krušne drobtine;

Zdaj ustvarite novo datoteko CSS in jo poimenujte drobtine.css. V datoteko dodajte naslednja pravila CSS:

.breadcrumb-not-active {
 barva: #cccccc;
}
.breadcrumb-active {
 barva: #000000;
}
.drobtina-puščica {
 rob-levo: 10px;
 desni rob: 10px;
}

Zdaj uvozite datoteko CSS v komponento React in dodajte drobtinica-puščica razreda za vašo komponente:

uvoz { Link, useLocation } od 'react-router-dom'
uvoz "./breadcrumbs.css";
funkcijoKrušne drobtine() {
konst lokacija = useLocation();
vrnitev (
<nav>
<Povezava do="/"
 className={location.pathname "/"? "Breadcrumb-active": "drobtinica-ni-aktivna"}
>
 domov
</Link>
<span className="drobtinica-puščica">&gt;</span>
<Povezava do="/products"
 className={location.pathname.startsWith("/products")? "Breadcrumb-active": "drobtinica-ni-aktivna"}
>
 Izdelki
</Link>
<span className="drobtinica-puščica">&gt;</span>
<Povezava do="/products/1"
 className={location.pathname "/products/1"? "Breadcrumb-active": "drobtinica-ni-aktivna"}
>
 Izdelek 1
</Link>
</nav>
 );
}
izvozprivzeto Krušne drobtine;

obstajajo različne vrste kavljev v Reactu. Knjižnica react-router-dom useLocation hook vam omogoča dostop do objekta lokacije, ki ima informacije o trenutni poti URL.

The Prop className komponente doda razred CSS v drobtine. Prop className sprejme niz ali niz nizov. Če je niz, bo elementu dodal niz kot en razred. Če gre za niz nizov, bo vsak niz v nizu dodan kot ločen razred.

The začne se z metoda preveri, ali se trenutno ime poti začne z "/products". To je zato, ker mora biti drobtinica za stran z izdelki aktivna ne samo, ko je pot »/products«, temveč tudi, ko je pot »/products/1«, »/products/2« itd.

2. način: z uporabo knjižnice use-react-router-breadcrumbs

Drug način za ustvarjanje drobtin v Reactu je uporaba knjižnice use-react-router-breadcrumbs. Ta knjižnica samodejno ustvari drobtinice na podlagi poti, definiranih v vaši aplikaciji React.

Če želite uporabljati to knjižnico, jo boste morali najprej namestiti z uporabo npm:

npm namestiteuporaba-react-router-drobtine

Ko je knjižnica nameščena, jo lahko uvozite v svojo komponento React:

uvoz uporabite Drobtine od 'use-react-router-drobtine'

Nato lahko uporabite uporabite Drobtine kavelj za ustvarjanje drobtin:

konst drobtine = useDrobtine();
konzola.log (drobtine);

S tem boste v konzolo zabeležili matriko predmetov poti. Vsak predmet poti vsebuje informacije o poti, kot so ime, pot in parametri.

Zdaj lahko svoje drobtinice upodabljate na zaslon. Lahko uporabite komponento iz knjižnice react-router za ustvarjanje vaših drobtin:

uvoz { Povezava } od 'react-router-dom'
uvoz uporabite Drobtine od 'use-react-router-drobtine'
konst poti = [
 {pot: '/users/:userId', drobtinica: 'Primer 1' },
 {pot: '/data', drobtinica: 'Primer 2' }
];
funkcijoKrušne drobtine() {
konst drobtine = useDrobtine (poti);
konzola.log (drobtine)
vrnitev (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Link key={match.url} to={match.url}>
 {drobtina} /
</Link>
 ))}
</nav>
 );
}
izvozprivzeto Krušne drobtine;

Komponenta povezave je uvožena iz knjižnice react-router-dom. To komponento boste uporabili za ustvarjanje povezav do drugih delov aplikacije. Lahko tudi ustvarite zaščitene poti z uporabo komponente Link.

Ustvari se niz objektov poti. Vsak objekt poti vsebuje pot in lastnost drobtine. Lastnost poti ustreza poti URL-ja, lastnost drobtine pa imenu poti.

The uporabite Drobtine kavelj se uporablja za ustvarjanje drobtin. Ta kavelj sprejme niz poti kot parameter. Poti se uporabljajo za ustvarjanje drobtin.

Metoda zemljevida se uporablja za ponavljanje po nizu drobtin. Za vsako drobtinico, a komponenta je ustvarjena. Komponenta Link ima a do prop, ki ustreza poti URL poti. Sama drobtina je upodobljena kot vsebina komponento.

Zdaj lahko drobtinam dodate nekaj stila. Ustvarite novo datoteko CSS in jo poimenujte Breadcrumbs.css. Nato v datoteko dodajte naslednja pravila CSS:

.breadcrumb-not-active {
 barva: #cccccc;
}
.breadcrumb-active {
 barva: #000000;
}

Zdaj lahko uvozite datoteko CSS v komponento React in dodate razrede drobtinic v komponente:

uvoz { Link, useLocation } od 'react-router-dom'
uvoz uporabite Drobtine od 'use-react-router-drobtine'
uvoz "./Breadcrumbs.css";
konst poti = [
 {pot: '/users/:userId', drobtinica: 'Primer 1' },
 {pot: '/data', drobtinica: 'Primer 2' }
];
funkcijoKrušne drobtine() {
konst drobtine = useDrobtine (poti);
konst lokacija = useLocation()
vrnitev (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Povezava 
 ključ={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "Breadcrumb-active": "drobtinica-ni-aktivna"}
>
 {drobtina} / 
</Link>
 ))}
</nav>
 );
}
izvozprivzeto Krušne drobtine;

Povečajte sodelovanje uporabnikov z drobtinami

Z drobtinicami lahko uporabnikom ne samo pomagate razumeti, kje so na vašem spletnem mestu, ampak lahko tudi povečate angažiranost uporabnikov. Drobtinice lahko uporabite za prikaz napredka uporabnika skozi opravilo, kot je postopek prijave ali nakup. S prikazovanjem napredka uporabnika ga lahko spodbudite, da dokonča nalogo.

Obstaja tudi veliko drugih stvari, ki jih morate imeti v mislih, ko oblikujete spletno mesto, kot so uporabnost, dostopnost in prijaznost do mobilnih naprav. Če pa upoštevate te stvari, lahko ustvarite spletno stran, ki je uporabniku prijazna in privlačna.