Észrevette valaha azokat a kis szövegrészeket egyes webhelyeken, amelyek jelzik az aktuális tartózkodási helyét az oldalon? Ezeket kenyérmorzsának nevezik, és hasznos módja lehet a felhasználók tájékozódásának, különösen összetett webhelyeken való navigálás során. Ez a cikk bemutatja, hogyan hozhat létre navigációs útvonalat a React.js-ben.

Mik azok a zsemlemorzsa és hogyan fontosak?

A navigációs elemek jellemzően kis szövegrészek, amelyek a webhelyen belüli aktuális helyet mutatják. Hasznosak lehetnek a felhasználók tájékozódásában, különösen akkor, ha több oldalt tartalmazó webhelyeken navigál. A linkek nyomvonalát biztosítva a navigációs útvonalak segíthetnek a felhasználóknak megérteni, hol vannak a webhelyen belül, és lehetővé teszik számukra, hogy könnyen visszaugorjanak az előző szakaszokhoz.

Fontos megjegyezni, hogy a kenyérmorzsát nem szabad elsődleges navigációs eszközként használni a webhelyeken. Inkább más navigációs elemek, például menü vagy keresősáv mellett kell őket használni.

Hogyan készítsünk kenyérmorzsát a React.js-ben

A React.js-ben két fő módja van a navigációs útvonal létrehozásának: a react-router-dom könyvtár vagy a use-react-router-breadcrumbs könyvtár. De mielőtt elkezdené, meg kell tennie Hozzon létre egy React alkalmazást.

1. módszer: A react-router-dom könyvtár használatával

A react-router-dom könyvtárral manuálisan hozhat létre navigációs útvonalakat a React alkalmazás minden elérési útjához. A könyvtár biztosítja a komponens, amellyel zsemlemorzsa készíthető.

A react-router-dom könyvtár használatához először telepítenie kell az npm használatával:

npm telepítés react-router-dom

A könyvtár telepítése után importálhatja a React összetevőbe:

import { Link } tól től "react-router-dom"

Ezután használhatja a komponens a kenyérmorzsa létrehozásához:

<Link a="/">itthon</Link>
<Link a="/products">Termékek</Link>
<Link a="/products/1">1. termék</Link>

Most hozzáadhat néhány stílust a navigációs útvonalhoz, és kiemelheti az aktuális oldalt, amelyen éppen tartózkodik. Ehhez használhatja a osztály név kelléke a összetevő. Az aktuális elérési út lekéréséhez használja a elhelyezkedés objektum a react-router-dom könyvtárból:

import { Link, useLocation } tól től "react-router-dom"
funkcióZsemlemorzsa() {
const hely = useLocation();
Visszatérés (
<nav>
<Link a="/"
 className={hely.elérési útnév "/"? "zsemlemorzsa-aktív": "zsemlemorzsa-nem-aktív"}
>
 itthon
</Link>
<Link a="/products"
 className={location.pathname.startsWith("/products")? "zsemlemorzsa-aktív": "zsemlemorzsa-nem-aktív"}
>
 Termékek
</Link>
<Link a="/products/1"
 className={hely.elérési útnév "/products/1"? "zsemlemorzsa-aktív": "zsemlemorzsa-nem-aktív"}
>
 1. termék
</Link>
</nav>
 );
}
exportalapértelmezett Zsemlemorzsa;

Most hozzon létre egy új CSS-fájlt, és nevezze el zsemlemorzsa.css. Adja hozzá a következő CSS-szabályokat a fájlhoz:

.zsemlemorzsa-nem-aktív {
 szín: #cccccc;
}
.zsemlemorzsa-aktív {
 szín: #000000;
}
.zsemlemorzsa-nyíl {
 margó-bal: 10 képpont;
 margó-jobb: 10 képpont;
}

Most importálja a CSS-fájlt a React összetevőbe, és adja hozzá a zsemlemorzsa-nyíl osztály a te alkatrészek:

import { Link, useLocation } tól től "react-router-dom"
import "./breadcrumbs.css";
funkcióZsemlemorzsa() {
const hely = useLocation();
Visszatérés (
<nav>
<Link a="/"
 className={hely.elérési útnév "/"? "zsemlemorzsa-aktív": "zsemlemorzsa-nem-aktív"}
>
 itthon
</Link>
<span className="zsemlemorzsa-nyíl">&gt;</span>
<Link a="/products"
 className={location.pathname.startsWith("/products")? "zsemlemorzsa-aktív": "zsemlemorzsa-nem-aktív"}
>
 Termékek
</Link>
<span className="zsemlemorzsa-nyíl">&gt;</span>
<Link a="/products/1"
 className={hely.elérési útnév "/products/1"? "zsemlemorzsa-aktív": "zsemlemorzsa-nem-aktív"}
>
 1. termék
</Link>
</nav>
 );
}
exportalapértelmezett Zsemlemorzsa;

Vannak különböző típusú horgok a Reactban. A react-router-dom könyvtár useLocation hook hozzáférést biztosít a helyobjektumhoz, amely információkat tartalmaz az aktuális URL-útvonalról.

A A komponens className propja hozzáad egy CSS-osztályt a navigációs útvonalhoz. A className prop egy karakterláncot vagy karakterláncok tömbjét vesz fel. Ha ez egy karakterlánc, akkor a karakterláncot egyetlen osztályként adja hozzá az elemhez. Ha ez egy karakterlánc tömbje, akkor a tömb minden egyes karakterlánca külön osztályként adódik hozzá.

A azzal kezdődik A metódus ellenőrzi, hogy az aktuális elérési út "/products" karakterrel kezdődik-e. Ennek az az oka, hogy a termékek oldal navigációs útvonalának nem csak akkor kell aktívnak lennie, ha az elérési út "/products", hanem akkor is, ha az elérési út "/products/1", "/products/2" stb.

2. módszer: A use-react-router-breadcrumbs Library használatával

A Reactban a navigációs útvonalak létrehozásának másik módja a use-react-router-breadcrumbs könyvtár használata. Ez a könyvtár automatikusan generál navigációs útvonalakat a React alkalmazásban meghatározott útvonalak alapján.

A könyvtár használatához először telepítenie kell az npm használatával:

npm telepítéshasználat-react-router-zsemlemorzsa

A könyvtár telepítése után importálhatja a React összetevőbe:

import használja a kenyérmorzsát tól től "use-react-router-breadcrumbs"

Ezután használhatja a használja a kenyérmorzsát horog zsemlemorzsa készítéséhez:

const kenyérmorzsa = useBreadcrumbs();
konzol.log (zsemlemorzsa);

Ezzel a navigációs útvonal objektumok tömbjét naplózza a konzolon. Minden navigációs útvonal objektum információkat tartalmaz az útvonalról, például a nevet, az elérési utat és a paramétereket.

Most megjelenítheti a navigációs morzsát a képernyőn. Használhatja a összetevő a react-router könyvtárból a navigációs morzsa létrehozásához:

import { Link } tól től "react-router-dom"
import használja a kenyérmorzsát tól től "use-react-router-breadcrumbs"
const útvonalak = [
 { pálya: '/users/:userId', kenyérmorzsa: '1. példa' },
 { pálya: '/data', kenyérmorzsa: '2. példa' }
];
funkcióZsemlemorzsa() {
const kenyérmorzsa = useBreadcrumbs (útvonalak);
konzol.log (zsemlemorzsa)
Visszatérés (
<nav>
 {breadcrumbs.map(({ egyezés, kenyérmorzsa }) => (
<Link kulcs={match.url} to={match.url}>
 {kenyérmorzsa} /
</Link>
 ))}
</nav>
 );
}
exportalapértelmezett Zsemlemorzsa;

A Link összetevő a react-router-dom könyvtárból importálva. Ezzel az összetevővel hozhat létre hivatkozásokat az alkalmazás más részeire. Te is védett útvonalakat hozzon létre a Link komponens használatával.

Létrejön az útvonalobjektumok tömbje. Minden útvonalobjektum tartalmaz egy elérési utat és egy navigációs útvonal tulajdonságot. A path tulajdonság az URL elérési útnak, a navigációs útvonal tulajdonság pedig a navigációs útvonal nevének felel meg.

A használja a kenyérmorzsát horgot használnak a zsemlemorzsa létrehozásához. Ez a horog egy sor útvonalat fogad el paraméterként. Az útvonalakat a kenyérmorzsa generálására használják.

A térképmódszert a kenyérmorzsa tömbjének iterálására használják. Minden zsemlemorzsához a komponens létrejön. A Link komponens rendelkezik a nak nek prop, amely megfelel a navigációs útvonal URL-útvonalának. Maga a kenyérmorzsa a tartalomként jelenik meg összetevő.

Most némi stílust adhat a zsemlemorzsához. Hozzon létre egy új CSS-fájlt, és nevezze el Breadcrumbs.css. Ezután adja hozzá a következő CSS-szabályokat a fájlhoz:

.zsemlemorzsa-nem-aktív {
 szín: #cccccc;
}
.zsemlemorzsa-aktív {
 szín: #000000;
}

Most már importálhatja a CSS-fájlt a React komponensbe, és hozzáadhatja a navigációs útvonal osztályait alkatrészek:

import { Link, useLocation } tól től "react-router-dom"
import használja a kenyérmorzsát tól től "use-react-router-breadcrumbs"
import "./Breadcrumbs.css";
const útvonalak = [
 { pálya: '/users/:userId', kenyérmorzsa: '1. példa' },
 { pálya: '/data', kenyérmorzsa: '2. példa' }
];
funkcióZsemlemorzsa() {
const kenyérmorzsa = useBreadcrumbs (útvonalak);
const hely = useLocation()
Visszatérés (
<nav>
 {breadcrumbs.map(({ egyezés, kenyérmorzsa }) => (
<Link 
 kulcs={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "zsemlemorzsa-aktív": "zsemlemorzsa-nem-aktív"}
>
 {kenyérmorzsa} / 
</Link>
 ))}
</nav>
 );
}
exportalapértelmezett Zsemlemorzsa;

Növelje a felhasználók elköteleződését a Breadcrumbs segítségével

A navigációs útvonalak segítségével nem csak abban segíthet a felhasználóknak, hogy megértsék, hol vannak a webhelyén, hanem növelheti a felhasználói elköteleződést is. A navigációs elemek segítségével meg lehet mutatni a felhasználó előrehaladását egy feladat, például regisztrációs folyamat vagy vásárlás során. A felhasználó előrehaladásának bemutatásával ösztönözheti őket a feladat elvégzésére.

Sok más dolgot is szem előtt kell tartania egy webhely tervezésekor, mint például a használhatóság, az akadálymentesítés és a mobilbarátság. Ha azonban ezeket a dolgokat szem előtt tartja, létrehozhat egy olyan webhelyet, amely egyszerre felhasználóbarát és vonzó.