Jeste li ikada primijetili one male dijelove teksta na nekim web stranicama koji označavaju vašu trenutnu lokaciju na web stranici? Oni se nazivaju mrvicama kruha i mogu biti koristan način usmjeravanja korisnika, posebno kada se kreću složenim web stranicama. Ovaj članak će vam pokazati kako stvoriti puteve kroz React.js.
Što su Breadcrumbs i koliko su važni?
Putanja su obično mali dijelovi teksta koji pokazuju trenutnu lokaciju unutar web stranice. Mogu biti od pomoći u usmjeravanju korisnika, posebno pri navigaciji kroz web stranice koje imaju nekoliko stranica. Pružajući trag poveznica, putevi mogu pomoći korisnicima da razumiju gdje se nalaze unutar web stranice i omogućiti im da se lako vrate na prethodne odjeljke.
Važno je napomenuti da se putevi ne smiju koristiti kao primarno sredstvo navigacije na web stranici. Umjesto toga, trebali bi se koristiti uz druge navigacijske elemente kao što su izbornik ili traka za pretraživanje.
Kako stvoriti Breadcrumbs u React.js
Dva su glavna načina za stvaranje putova kroz React.js: korištenjem
reagirati-usmjerivač-dom biblioteku ili korištenjem use-react-router-breadcrumbs knjižnica. Ali prije nego počnete, morate izraditi React aplikaciju.Metoda 1: korištenjem biblioteke react-router-dom
S bibliotekom react-router-dom, možete ručno kreirati puteve za svaki put u svojoj React aplikaciji. Knjižnica nudi a komponenta koja se može koristiti za stvaranje prezli.
Da biste koristili biblioteku react-router-dom, prvo je morate instalirati koristeći npm:
npm instalirati reagirati-usmjerivač-domNakon što je biblioteka instalirana, možete je uvesti u svoju React komponentu:
uvoz { Veza } iz 'react-router-dom'Zatim možete koristiti komponenta za stvaranje puteva:
<Veza na="/">Dom</Link>
<Veza na="/products">Proizvodi</Link>
<Veza na="/products/1">Proizvod 1</Link>Sada možete dodati malo stila putevima i istaknuti trenutnu stranicu na kojoj se nalazite. Za to možete koristiti naziv klase oslonac od komponenta. Da biste dobili trenutni naziv putanje, možete koristiti mjesto objekt iz biblioteke react-router-dom:
uvoz { Link, useLocation } iz 'react-router-dom'
funkcijaKrušne mrvice() {
konst lokacija = useLocation();
povratak (
<nav>
<Veza na="/"
className={location.pathname "/"? "krušne mrvice-aktivan": "mrvica-nije-aktivna"}
>
Dom
</Link>
<Veza na="/products"
className={location.pathname.startsWith("/products")? "krušne mrvice-aktivan": "mrvica-nije-aktivna"}
>
Proizvodi
</Link>
<Veza na="/products/1"
className={location.pathname "/products/1"? "krušne mrvice-aktivan": "mrvica-nije-aktivna"}
>
Proizvod 1
</Link>
</nav>
);
}
izvozzadano Krušne mrvice;Sada stvorite novu CSS datoteku i dajte joj naziv prezle.css. Dodajte sljedeća CSS pravila u datoteku:
.breadcrumb-not-active {
boja: #cccccc;
}
.bradcrumb-aktivan {
boja: #000000;
}
.krušne mrvice-strelica {
margin-lijevo: 10px;
margina-desno: 10px;
}Sada uvezite svoju CSS datoteku u React komponentu i dodajte krušna mrvica-strijela razreda prema vašem komponente:
uvoz { Link, useLocation } iz 'react-router-dom'
uvoz "./breadcrumbs.css";
funkcijaKrušne mrvice() {
konst lokacija = useLocation();
povratak (
<nav>
<Veza na="/"
className={location.pathname "/"? "krušne mrvice-aktivan": "mrvica-nije-aktivna"}
>
Dom
</Link>
<span className="krušna mrvica-strijela">></span>
<Veza na="/products"
className={location.pathname.startsWith("/products")? "krušne mrvice-aktivan": "mrvica-nije-aktivna"}
>
Proizvodi
</Link>
<span className="krušna mrvica-strijela">></span>
<Veza na="/products/1"
className={location.pathname "/products/1"? "krušne mrvice-aktivan": "mrvica-nije-aktivna"}
>
Proizvod 1
</Link>
</nav>
);
}
izvozzadano Krušne mrvice;Tamo su različite vrste kuka u Reactu. Knjižnica react-router-dom useLocation hook vam daje pristup objektu lokacije, koji ima informacije o trenutnom URL putu.
The Prop className komponente dodaje CSS klasu u puteve. Prop className uzima string ili niz stringova. Ako se radi o nizu, elementu će dodati niz kao jednu klasu. Ako se radi o nizu nizova, svaki će se niz u nizu dodati kao zasebna klasa.
The počinje sa metoda provjerava počinje li trenutni naziv putanje s "/products". To je zato što bi put kroz stranicu za stranicu proizvoda trebao biti aktivan ne samo kada je put "/products" već i kada je put "/products/1", "/products/2" itd.
Metoda 2: korištenjem knjižnice use-react-router-breadcrumbs
Još jedan način za stvaranje puteva u Reactu je korištenje biblioteke use-react-router-breadcrumbs. Ova biblioteka automatski generira puteve na temelju ruta definiranih u vašoj React aplikaciji.
Da biste koristili ovu biblioteku, prvo ćete je morati instalirati koristeći npm:
npm instaliratikoristiti-react-router-breadcrumbsNakon što je biblioteka instalirana, možete je uvesti u svoju React komponentu:
uvoz koristite prezle iz 'use-react-router-breadcrumbs'Zatim možete koristiti koristite prezle kuka za stvaranje krušnih mrvica:
konst krušne mrvice = koristi krušne mrvice();
konzola.cjepanica (krušne mrvice);Ovo će zabilježiti niz objekata puta kroz stranicu na konzoli. Svaki objekt puta kroz sadržaj sadrži informacije o ruti, kao što su naziv, staza i parametri.
Sada možete prikazati svoje puteve na ekranu. Možete koristiti komponenta iz biblioteke react-router za stvaranje vaših putova kroz web-lokaciju:
uvoz { Veza } iz 'react-router-dom'
uvoz koristite prezle iz 'use-react-router-breadcrumbs'
konst rute = [
{ staza: '/users/:userId', put kroz kruh: 'Primjer 1' },
{ staza: '/data', put kroz kruh: 'Primjer 2' }
];
funkcijaKrušne mrvice() {
konst breadcrumbs = useBreadcrumbs (rute);
konzola.log (mrvice kruha)
povratak (
<nav>
{breadcrumbs.map(({ match, breadcrumb }) => (
<Veza ključ={match.url} na={match.url}>
{breadcrumb} /
</Link>
))}
</nav>
);
}
izvozzadano Krušne mrvice;Komponenta Link je uvezena iz biblioteke react-router-dom. Ovu komponentu ćete koristiti za stvaranje poveznica na druge dijelove aplikacije. Također možete stvoriti zaštićene rute pomoću komponente Link.
Kreira se niz objekata rute. Svaki objekt rute sadrži stazu i svojstvo putanje. Svojstvo staze odgovara putanji URL-a, a svojstvo puta kroz web odgovara nazivu puta.
The koristite prezle kuka se koristi za stvaranje krušnih mrvica. Ova kuka prihvaća niz ruta kao parametar. Rute se koriste za generiranje puteva.
Metoda karte koristi se za ponavljanje niza puteva. Za svaku mrvicu kruha, a komponenta je stvorena. Komponenta Link ima a do prop, koji odgovara URL putanji putanje. Sam put kroz kruh prikazuje se kao sadržaj komponenta.
Sada možete dodati malo stila krušnim mrvicama. Napravite novu CSS datoteku i dajte joj naziv Breadcrumbs.css. Nakon toga u datoteku dodajte sljedeća CSS pravila:
.breadcrumb-not-active {
boja: #cccccc;
}
.bradcrumb-aktivan {
boja: #000000;
}Sada možete uvesti CSS datoteku u komponentu React i dodati klase putanje u njoj komponente:
uvoz { Link, useLocation } iz 'react-router-dom'
uvoz koristite prezle iz 'use-react-router-breadcrumbs'
uvoz "./Breadcrumbs.css";
konst rute = [
{ staza: '/users/:userId', put kroz kruh: 'Primjer 1' },
{ staza: '/data', put kroz kruh: 'Primjer 2' }
];
funkcijaKrušne mrvice() {
konst breadcrumbs = useBreadcrumbs (rute);
konst lokacija = useLocation()
povratak (
<nav>
{breadcrumbs.map(({ match, breadcrumb }) => (
<Veza
ključ={match.url}
to={match.url}
className={match.pathname location.pathname? "krušne mrvice-aktivan": "mrvica-nije-aktivna"}
>
{breadcrumb} /
</Link>
))}
</nav>
);
}
izvozzadano Krušne mrvice;
Povećajte angažman korisnika pomoću Breadcrumbs
S putevima ne samo da možete pomoći korisnicima da razumiju gdje se nalaze unutar vaše web stranice, već možete i povećati angažman korisnika. Breadcrumbs se mogu koristiti za prikaz napretka korisnika kroz zadatak, kao što je proces prijave ili kupnje. Prikazujući korisnikov napredak, možete ga potaknuti da dovrši zadatak.
Postoje i mnoge druge stvari koje biste trebali imati na umu kada dizajnirate web stranicu, poput upotrebljivosti, pristupačnosti i prilagođenosti mobilnim uređajima. Međutim, ako imate ove stvari na umu, možete stvoriti web mjesto koje je jednostavno i privlačno.