Všimli jste si někdy těch malých útržků textu na některých webech, které označují vaši aktuální polohu na webu? Těm se říká drobky a mohou být užitečným způsobem orientace uživatelů, zejména při procházení složitými weby. Tento článek vám ukáže, jak vytvořit strouhanku v React.js.

Co jsou strouhanka a jak jsou důležité?

Drobečková navigace jsou obvykle malé kousky textu, které ukazují aktuální umístění na webu. Mohou být užitečné při orientaci uživatelů, zejména při procházení weby, které mají několik stránek. Poskytnutím trasy odkazů mohou drobky pomoci uživatelům porozumět tomu, kde se na webu nacházejí, a umožnit jim snadno se vrátit k předchozím sekcím.

Je důležité si uvědomit, že strouhanka by neměla být používána jako primární prostředek navigace na webu. Spíše by se měly používat vedle jiných navigačních prvků, jako je nabídka nebo vyhledávací lišta.

Jak vytvořit strouhanku v React.js

Existují dva hlavní způsoby, jak v React.js vytvořit strouhanku: pomocí reagovat-router-dom knihovny nebo pomocí

instagram viewer
use-react-router-breadcrumbs knihovna. Ale než začnete, musíte vytvořit aplikaci React.

Metoda 1: Pomocí knihovny Reag-router-dom

Pomocí knihovny React-router-dom můžete ručně vytvářet drobky pro každou cestu v aplikaci React. Knihovna poskytuje a komponentu, kterou lze použít k vytvoření strouhanky.

Chcete-li používat knihovnu respond-router-dom, musíte ji nejprve nainstalovat pomocí npm:

npm Nainstalujte reagovat-router-dom

Jakmile je knihovna nainstalována, můžete ji importovat do komponenty React:

import { Odkaz } z 'react-router-dom'

Poté můžete použít komponenta pro vytvoření strouhanky:

<Odkaz na ="/">Domov</Link>
<Odkaz na ="/products">produkty</Link>
<Odkaz na ="/products/1">Produkt 1</Link>

Nyní můžete do strouhanky přidat nějaký styl a zvýraznit aktuální stránku, na které se nacházíte. K tomu můžete použít jméno třídy podpěra toho komponent. Chcete-li získat aktuální název cesty, můžete použít umístění objekt z knihovny respond-router-dom:

import { Link, useLocation } z 'react-router-dom'
funkceStrouhanka() {
konst umístění = useLocation();
vrátit se (
<nav>
<Odkaz na ="/"
 className={location.pathname "/"? "strouhanka aktivní": "strouhanka-neaktivní"}
>
 Domov
</Link>
<Odkaz na ="/products"
 className={location.pathname.startsWith("/products")? "strouhanka aktivní": "strouhanka-neaktivní"}
>
 produkty
</Link>
<Odkaz na ="/products/1"
 className={location.pathname "/products/1"? "strouhanka aktivní": "strouhanka-neaktivní"}
>
 Produkt 1
</Link>
</nav>
 );
}
vývoznívýchozí Strouhanka;

Nyní vytvořte nový soubor CSS a pojmenujte jej strouhanka.css. Přidejte do souboru následující pravidla CSS:

.drobečková-neaktivní {
 barva: #cccccc;
}
.drobečková aktivní {
 barva: #000000;
}
.strouhanka-šipka {
 margin-left: 10px;
 pravý okraj: 10px;
}

Nyní importujte svůj soubor CSS do komponenty React a přidejte soubor strouhanka-šipka třída k vašemu komponenty:

import { Link, useLocation } z 'react-router-dom'
import "./breadcrumbs.css";
funkceStrouhanka() {
konst umístění = useLocation();
vrátit se (
<nav>
<Odkaz na ="/"
 className={location.pathname "/"? "strouhanka aktivní": "strouhanka-neaktivní"}
>
 Domov
</Link>
<span className="strouhanka-šipka">&gt;</span>
<Odkaz na ="/products"
 className={location.pathname.startsWith("/products")? "strouhanka aktivní": "strouhanka-neaktivní"}
>
 produkty
</Link>
<span className="strouhanka-šipka">&gt;</span>
<Odkaz na ="/products/1"
 className={location.pathname "/products/1"? "strouhanka aktivní": "strouhanka-neaktivní"}
>
 Produkt 1
</Link>
</nav>
 );
}
vývoznívýchozí Strouhanka;

Existují různé typy háčků v Reactu. Knihovna reakčního směrovače použitíUmístění hook vám umožňuje přístup k objektu umístění, který obsahuje informace o aktuální cestě URL.

The prop className komponenty přidá třídu CSS do drobečky. Prop název třídy přebírá řetězec nebo pole řetězců. Pokud je to řetězec, přidá řetězec jako jednu třídu do prvku. Pokud se jedná o pole řetězců, každý řetězec v poli se přidá jako samostatná třída.

The začíná s metoda zkontroluje, zda aktuální cesta začíná "/products". Je to proto, že drobečková navigace pro stránku produktů by měla být aktivní nejen tehdy, když je cesta „/produkty“, ale také když je cesta „/produkty/1“, „/produkty/2“ atd.

Metoda 2: Pomocí knihovny use-react-router-breadcrumbs

Dalším způsobem, jak v Reactu vytvořit drobky, je použití knihovny use-react-router-breadcrumbs. Tato knihovna automaticky generuje drobky na základě tras definovaných ve vaší aplikaci React.

Chcete-li používat tuto knihovnu, musíte ji nejprve nainstalovat pomocí npm:

npm Nainstalujtepoužití-react-router-drobečka

Jakmile je knihovna nainstalována, můžete ji importovat do komponenty React:

import použijte strouhanku z 'use-react-router-breadcrumbs'

Poté můžete použít použijte strouhanku háček pro vytvoření strouhanky:

konst strouhanka = useBreadcrumbs();
řídicí panel.log (strouhanka);

Tím se do konzoly zaprotokoluje pole objektů drobečkové navigace. Každý objekt drobečkové navigace obsahuje informace o trase, jako je název, cesta a parametry.

Nyní můžete vykreslit drobečky na obrazovku. Můžete použít komponenta z knihovny Reag-router pro vytvoření vaší drobečky:

import { Odkaz } z 'react-router-dom'
import použijte strouhanku z 'use-react-router-breadcrumbs'
konst trasy = [
 { cesta: '/users/:userId', strouhanka: 'Příklad 1' },
 { cesta: '/data', strouhanka: 'Příklad 2' }
];
funkceStrouhanka() {
konst strouhanka = použití strouhanka (trasy);
řídicí panel.log (strouhanka)
vrátit se (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Klíč odkazu={match.url} na={match.url}>
 {strouhanka} /
</Link>
 ))}
</nav>
 );
}
vývoznívýchozí Strouhanka;

Komponenta Link je importována z knihovny Reag-router-dom. Tuto komponentu použijete k vytvoření odkazů na další části aplikace. Můžete také vytvořit chráněné cesty pomocí komponenty Link.

Vytvoří se pole objektů trasy. Každý objekt trasy obsahuje cestu a vlastnost drobečkové navigace. Vlastnost path odpovídá cestě URL a vlastnost drobečkové navigace odpovídá názvu drobečkové navigace.

The použijte strouhanku háček se používá k vytvoření strouhanky. Tento hák přijímá pole tras jako parametr. Cesty se používají ke generování strouhanky.

Metoda map se používá k iteraci přes pole strouhanky. Pro každou strouhanku a komponenta je vytvořena. Komponenta Link má a na prop, která odpovídá cestě URL ve strouhance. Samotná strouhanka je vykreslena jako obsah souboru komponent.

Nyní můžete do strouhanky přidat trochu stylingu. Vytvořte nový soubor CSS a pojmenujte jej Breadcrumbs.css. Poté do souboru přidejte následující pravidla CSS:

.drobečková-neaktivní {
 barva: #cccccc;
}
.drobečková aktivní {
 barva: #000000;
}

Nyní můžete importovat soubor CSS do komponenty React a přidat třídy drobečkové navigace do komponenty komponenty:

import { Link, useLocation } z 'react-router-dom'
import použijte strouhanku z 'use-react-router-breadcrumbs'
import "./Breadcrumbs.css";
konst trasy = [
 { cesta: '/users/:userId', strouhanka: 'Příklad 1' },
 { cesta: '/data', strouhanka: 'Příklad 2' }
];
funkceStrouhanka() {
konst strouhanka = použití strouhanka (trasy);
konst umístění = useLocation()
vrátit se (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Odkaz 
 key={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "strouhanka aktivní": "strouhanka-neaktivní"}
>
 {strouhanka} / 
</Link>
 ))}
</nav>
 );
}
vývoznívýchozí Strouhanka;

Zvyšte zapojení uživatelů pomocí drobečkové navigace

Pomocí drobečky můžete uživatelům nejen pomoci pochopit, kde se na vašem webu nacházejí, ale můžete také zvýšit zapojení uživatelů. Drobečková navigace může být použita k zobrazení postupu uživatele při plnění úkolu, jako je proces registrace nebo nákup. Zobrazením pokroku uživatele můžete povzbudit k dokončení úkolu.

Existuje také mnoho dalších věcí, které byste měli mít na paměti při navrhování webu, jako je použitelnost, dostupnost a přívětivost pro mobilní zařízení. Pokud však budete mít tyto věci na paměti, můžete vytvořit web, který bude uživatelsky přívětivý a poutavý.