Všimli ste si niekedy tie malé kúsky textu na niektorých webových stránkach, ktoré označujú vašu aktuálnu polohu na stránke? Nazývajú sa to strúhanka a môžu byť užitočným spôsobom orientácie používateľov, najmä pri navigácii na zložitých webových stránkach. Tento článok vám ukáže, ako vytvoriť strúhanku v React.js.
Čo sú to strúhanky a ako sú dôležité?
Drobečková navigácia sú zvyčajne malé kúsky textu, ktoré zobrazujú aktuálnu polohu na webovej lokalite. Môžu byť užitočné pri orientácii používateľov, najmä pri prechádzaní webovými stránkami, ktoré majú niekoľko stránok. Poskytnutím trasy odkazov môže strúhanka pomôcť používateľom pochopiť, kde sa na webovej lokalite nachádzajú, a umožniť im jednoduchý prechod späť do predchádzajúcich sekcií.
Je dôležité poznamenať, že strúhanka by sa nemala používať ako hlavný spôsob navigácie na webovej lokalite. Skôr by sa mali používať popri iných navigačných prvkoch, ako je menu alebo vyhľadávací panel.
Ako vytvoriť Breadcrumbs v React.js
Existujú dva hlavné spôsoby, ako vytvoriť strúhanku v React.js: pomocou
reagovať-smerovač-dom knižnice alebo pomocou use-react-router-breadcrumbs knižnica. Pred začatím však musíte vytvorte aplikáciu React.Metóda 1: Pomocou knižnice Reag-router-dom
S knižnicou React-router-dom môžete manuálne vytvárať drobky pre každú cestu vo vašej aplikácii React. Knižnica poskytuje a komponent, ktorý možno použiť na vytvorenie strúhanky.
Ak chcete použiť knižnicu Reag-router-dom, musíte ju najprv nainštalovať pomocou npm:
npm Inštalácia reagovať-smerovač-domPo nainštalovaní knižnice ju môžete importovať do svojho komponentu React:
importovať { Link } od „react-router-dom“Potom môžete použiť komponent na vytvorenie strúhanky:
<Odkaz na ="/">Domov</Link>
<Odkaz na ="/products">Produkty</Link>
<Odkaz na ="/products/1">Produkt 1</Link>Teraz môžete do strúhanky pridať nejaký štýl a zvýrazniť aktuálnu stránku, na ktorej sa nachádzate. Na to môžete použiť className opora z komponent. Ak chcete získať aktuálnu cestu, môžete použiť umiestnenie objekt z knižnice respond-router-dom:
importovať { Link, useLocation } od „react-router-dom“
funkciuStrúhanka() {
konšt umiestnenie = useLocation();
vrátiť (
<nav>
<Odkaz na ="/"
className={location.pathname "/"? "strúhanka-aktívny": "strúhanka-neaktívne"}
>
Domov
</Link>
<Odkaz na ="/products"
className={location.pathname.startsWith("/products")? "strúhanka-aktívny": "strúhanka-neaktívne"}
>
Produkty
</Link>
<Odkaz na ="/products/1"
className={location.pathname "/products/1"? "strúhanka-aktívny": "strúhanka-neaktívne"}
>
Produkt 1
</Link>
</nav>
);
}
exportpredvolená Strúhanka;Teraz vytvorte nový súbor CSS a pomenujte ho strúhanka.css. Pridajte do súboru nasledujúce pravidlá CSS:
.strúhanka-neaktívna {
farba: #cccccc;
}
.drobček-aktívny {
farba: #000000;
}
.strúhanka-šípka {
ľavý okraj: 10px;
pravý okraj: 10px;
}Teraz importujte svoj súbor CSS do komponentu React a pridajte súbor strúhanka-šípka trieda do vašej komponenty:
importovať { Link, useLocation } od „react-router-dom“
importovať "./breadcrumbs.css";
funkciuStrúhanka() {
konšt umiestnenie = useLocation();
vrátiť (
<nav>
<Odkaz na ="/"
className={location.pathname "/"? "strúhanka-aktívny": "strúhanka-neaktívne"}
>
Domov
</Link>
<span className="strúhanka-šípka">></span>
<Odkaz na ="/products"
className={location.pathname.startsWith("/products")? "strúhanka-aktívny": "strúhanka-neaktívne"}
>
Produkty
</Link>
<span className="strúhanka-šípka">></span>
<Odkaz na ="/products/1"
className={location.pathname "/products/1"? "strúhanka-aktívny": "strúhanka-neaktívne"}
>
Produkt 1
</Link>
</nav>
);
}
exportpredvolená Strúhanka;Existujú rôzne typy háčikov v Reacte. Knižnica reakčného smerovača useLocation hook vám poskytuje prístup k objektu umiestnenia, ktorý obsahuje informácie o aktuálnej ceste URL.
The prop className komponentu pridá do strúhanky triedu CSS. Prop className berie reťazec alebo pole reťazcov. Ak je to reťazec, pridá reťazec ako jednu triedu do prvku. Ak ide o pole reťazcov, každý reťazec v poli sa pridá ako samostatná trieda.
The začína s metóda skontroluje, či aktuálna cesta začína "/products". Je to preto, že strúhanka pre stránku produktov by mala byť aktívna nielen vtedy, keď je cesta „/produkty“, ale aj vtedy, keď je cesta „/produkty/1“, „/produkty/2“ atď.
Metóda 2: Pomocou knižnice use-react-router-breadcrumbs
Ďalším spôsobom, ako vytvoriť strúhanku v Reacte, je použiť knižnicu use-react-router-breadcrumbs. Táto knižnica automaticky generuje navigáciu na základe trás definovaných vo vašej aplikácii React.
Ak chcete používať túto knižnicu, musíte ju najprv nainštalovať pomocou npm:
npm Inštaláciapoužitie-reagovať-router-strúhankaPo nainštalovaní knižnice ju môžete importovať do svojho komponentu React:
importovať použite strúhanku od 'use-react-router-breadcrumbs'Potom môžete použiť použite strúhanku háčik na vytvorenie strúhanky:
konšt strúhanka = použitie strúhanka();
konzoly.log (strúhanka);Týmto sa do konzoly zaznamená pole objektov s navigáciou. Každý objekt drobčeka obsahuje informácie o trase, ako je názov, cesta a parametre.
Teraz môžete svoju navigáciu zobraziť na obrazovke. Môžete použiť komponent z knižnice smerovača reakcií na vytvorenie vašej strúhanky:
importovať { Link } od „react-router-dom“
importovať použite strúhanku od 'use-react-router-breadcrumbs'
konšt trasy = [
{ cesta: '/users/:userId', strúhanka: 'Príklad 1' },
{ cesta: '/data', strúhanka: 'Príklad 2' }
];
funkciuStrúhanka() {
konšt strúhanka = použitie strúhanka (cesty);
konzoly.log (strúhanka)
vrátiť (
<nav>
{breadcrumbs.map(({ match, breadcrumbs }) => (
<Prepojiť kľúč={match.url} to={match.url}>
{breadcrumb} /
</Link>
))}
</nav>
);
}
exportpredvolená Strúhanka;Komponent Link je importovaný z knižnice Reag-router-dom. Tento komponent použijete na vytváranie odkazov na iné časti aplikácie. Môžete tiež vytvoriť chránené trasy pomocou komponentu Link.
Vytvorí sa pole objektov trasy. Každý objekt trasy obsahuje cestu a vlastnosť drobčeka. Vlastnosť cesta zodpovedá ceste URL a vlastnosť strúhanky zodpovedá názvu strúhanky.
The použite strúhanku hák sa používa na vytvorenie strúhanky. Tento hák akceptuje pole trás ako parameter. Cesty sa používajú na generovanie strúhanky.
Metóda mapy sa používa na iteráciu cez pole strúhanky. Pre každú strúhanku a komponent je vytvorený. Komponent Link má a do prop, ktorá zodpovedá URL ceste v strúhanke. Samotná strúhanka sa vykreslí ako obsah komponent.
Teraz môžete do strúhanky pridať nejaký styling. Vytvorte nový súbor CSS a pomenujte ho Breadcrumbs.css. Potom do súboru pridajte nasledujúce pravidlá CSS:
.strúhanka-neaktívna {
farba: #cccccc;
}
.drobček-aktívny {
farba: #000000;
}Teraz môžete importovať súbor CSS do komponentu React a pridať do neho triedy strúhanky komponenty:
importovať { Link, useLocation } od „react-router-dom“
importovať použite strúhanku od 'use-react-router-breadcrumbs'
importovať "./Breadcrumbs.css";
konšt trasy = [
{ cesta: '/users/:userId', strúhanka: 'Príklad 1' },
{ cesta: '/data', strúhanka: 'Príklad 2' }
];
funkciuStrúhanka() {
konšt strúhanka = použitie strúhanka (cesty);
konšt umiestnenie = useLocation()
vrátiť (
<nav>
{breadcrumbs.map(({ match, breadcrumbs }) => (
<Odkaz
key={match.url}
to={match.url}
className={match.pathname location.pathname? "strúhanka-aktívny": "strúhanka-neaktívne"}
>
{breadcrumb} /
</Link>
))}
</nav>
);
}
exportpredvolená Strúhanka;
Zvýšte zapojenie používateľov pomocou strúhanky
Pomocou strúhanky môžete nielen pomôcť používateľom pochopiť, kde sa na vašom webe nachádzajú, ale môžete tiež zvýšiť zapojenie používateľov. Drobčeky možno použiť na zobrazenie postupu používateľa pri vykonávaní úlohy, ako je napríklad proces registrácie alebo nákup. Ukázaním postupu používateľa ho môžete povzbudiť, aby úlohu dokončil.
Existuje aj mnoho ďalších vecí, ktoré by ste mali mať na pamäti pri navrhovaní webovej lokality, ako napríklad použiteľnosť, dostupnosť a vhodnosť pre mobilné zariadenia. Ak však budete mať tieto veci na pamäti, môžete vytvoriť webovú stránku, ktorá bude užívateľsky príjemná a pútavá.