Haben Sie jemals diese kleinen Textstücke auf einigen Websites bemerkt, die Ihren aktuellen Standort auf der Website angeben? Diese werden als Breadcrumbs bezeichnet und können eine hilfreiche Orientierungshilfe für Benutzer sein, insbesondere bei der Navigation durch komplexe Websites. Dieser Artikel zeigt Ihnen, wie Sie Breadcrumbs in React.js erstellen.

Was sind Semmelbrösel und wie wichtig sind sie?

Breadcrumbs sind normalerweise kleine Textstücke, die die aktuelle Position innerhalb einer Website anzeigen. Sie können bei der Orientierung der Benutzer hilfreich sein, insbesondere beim Navigieren durch Websites mit mehreren Seiten. Durch die Bereitstellung einer Spur von Links können Breadcrumbs den Benutzern helfen zu verstehen, wo sie sich innerhalb einer Website befinden, und es ihnen ermöglichen, leicht zu vorherigen Abschnitten zurückzunavigieren.

Es ist wichtig zu beachten, dass Breadcrumbs nicht als primäres Navigationsmittel auf einer Website verwendet werden sollten. Vielmehr sollten sie zusätzlich zu anderen Navigationselementen wie einem Menü oder einer Suchleiste verwendet werden.

instagram viewer

So erstellen Sie Breadcrumbs in React.js

Es gibt zwei Möglichkeiten, Breadcrumbs in React.js zu erstellen: durch die Verwendung von reagieren-router-dom Bibliothek oder über die use-react-router-breadcrumbs Bibliothek. Aber bevor Sie beginnen, müssen Sie Erstellen Sie eine React-App.

Methode 1: Durch Verwenden der React-Router-Dom-Bibliothek

Mit der React-Router-Dom-Bibliothek können Sie Breadcrumbs für jeden Pfad in Ihrer React-Anwendung manuell erstellen. Die Bibliothek bietet eine Komponente, die zum Erstellen von Breadcrumbs verwendet werden kann.

Um die React-Router-Dom-Bibliothek zu verwenden, müssen Sie sie zuerst mit npm installieren:

npm Installieren reagieren-router-dom

Sobald die Bibliothek installiert wurde, können Sie sie in Ihre React-Komponente importieren:

importieren { Verknüpfung } aus 'reagieren-router-dom'

Sie können dann die verwenden Komponente zum Erstellen von Breadcrumbs:

<Link zu="/">Heim</Link>
<Link zu="/products">Produkte</Link>
<Link zu="/products/1">Produkt 1</Link>

Jetzt können Sie den Breadcrumbs etwas Styling hinzufügen und die aktuelle Seite hervorheben, auf der Sie sich befinden. Dafür können Sie die verwenden Klassenname Stütze der Komponente. Um den aktuellen Pfadnamen zu erhalten, können Sie die verwenden Standort Objekt aus der React-Router-Dom-Bibliothek:

importieren { Link, useLocation } aus 'reagieren-router-dom'
FunktionSemmelbrösel() {
konst location = useLocation();
zurückkehren (
<Navi>
<Link zu="/"
 className={location.pathname "/"? "paniermehl-aktiv": "Breadcrumb-nicht-aktiv"}
>
 Heim
</Link>
<Link zu="/products"
 className={location.pathname.startsWith("/products")? "paniermehl-aktiv": "Breadcrumb-nicht-aktiv"}
>
 Produkte
</Link>
<Link zu="/products/1"
 className={location.pathname "/products/1"? "paniermehl-aktiv": "Breadcrumb-nicht-aktiv"}
>
 Produkt 1
</Link>
</nav>
 );
}
ExportStandard Semmelbrösel;

Erstellen Sie nun eine neue CSS-Datei und benennen Sie sie Brotkrümel.css. Fügen Sie der Datei die folgenden CSS-Regeln hinzu:

.breadcrumb-nicht-aktiv {
 Farbe: #cccccc;
}
.breadcrumb-aktiv {
 Farbe: #000000;
}
.Breadcrumb-Pfeil {
 Rand links: 10px;
 Rand rechts: 10px;
}

Importieren Sie nun Ihre CSS-Datei in Ihre React-Komponente und fügen Sie die Breadcrumb-Pfeil Klasse zu dir Komponenten:

importieren { Link, useLocation } aus 'reagieren-router-dom'
importieren "./breadcrumbs.css";
FunktionSemmelbrösel() {
konst location = useLocation();
zurückkehren (
<Navi>
<Link zu="/"
 className={location.pathname "/"? "paniermehl-aktiv": "Breadcrumb-nicht-aktiv"}
>
 Heim
</Link>
<span Klassenname="Breadcrumb-Pfeil">&gt;</span>
<Link zu="/products"
 className={location.pathname.startsWith("/products")? "paniermehl-aktiv": "Breadcrumb-nicht-aktiv"}
>
 Produkte
</Link>
<span Klassenname="Breadcrumb-Pfeil">&gt;</span>
<Link zu="/products/1"
 className={location.pathname "/products/1"? "paniermehl-aktiv": "Breadcrumb-nicht-aktiv"}
>
 Produkt 1
</Link>
</nav>
 );
}
ExportStandard Semmelbrösel;

Es gibt verschiedene Arten von Hooks in React. Die React-Router-Dom-Bibliothek useLocation Hook gibt Ihnen Zugriff auf das Location-Objekt, das Informationen über den aktuellen URL-Pfad enthält.

Der Die Eigenschaft className der Komponente fügt den Breadcrumbs eine CSS-Klasse hinzu. Die Eigenschaft className akzeptiert eine Zeichenfolge oder ein Array von Zeichenfolgen. Wenn es sich um eine Zeichenfolge handelt, wird die Zeichenfolge als einzelne Klasse zum Element hinzugefügt. Wenn es sich um ein Array von Zeichenfolgen handelt, wird jede Zeichenfolge im Array als separate Klasse hinzugefügt.

Der beginnt mit -Methode prüft, ob der aktuelle Pfadname mit "/products" beginnt. Das liegt daran, dass der Breadcrumb für die Produktseite nicht nur aktiv sein sollte, wenn der Pfad „/products“ lautet, sondern auch, wenn der Pfad „/products/1“, „/products/2“ usw. lautet.

Methode 2: Durch Verwenden der use-react-router-breadcrumbs-Bibliothek

Eine andere Möglichkeit, Breadcrumbs in React zu erstellen, ist die Verwendung der Bibliothek use-react-router-breadcrumbs. Diese Bibliothek generiert automatisch Breadcrumbs basierend auf den in Ihrer React-Anwendung definierten Routen.

Um diese Bibliothek zu verwenden, müssen Sie sie zuerst mit npm installieren:

npm Installierenverwenden-Reagieren-Router-Breadcrumbs

Sobald die Bibliothek installiert wurde, können Sie sie in Ihre React-Komponente importieren:

importieren Breadcrumbs verwenden aus 'use-react-router-breadcrumbs'

Sie können dann die verwenden Breadcrumbs verwenden Hook zum Erstellen von Breadcrumbs:

konst Breadcrumbs = useBreadcrumbs();
Konsole.log (Breadcrumbs);

Dadurch wird ein Array von Breadcrumb-Objekten in der Konsole protokolliert. Jedes Breadcrumb-Objekt enthält Informationen zur Route, z. B. Name, Pfad und Parameter.

Jetzt können Sie Ihre Breadcrumbs auf dem Bildschirm rendern. Du kannst den... benutzen Komponente aus der React-Router-Bibliothek, um Ihre Breadcrumbs zu erstellen:

importieren { Verknüpfung } aus 'reagieren-router-dom'
importieren Breadcrumbs verwenden aus 'use-react-router-breadcrumbs'
konst Routen = [
 { Weg: '/users/:userId', Brotkrümel: 'Beispiel 1' },
 { Weg: '/data', Brotkrümel: 'Beispiel 2' }
];
FunktionSemmelbrösel() {
konst breadcrumbs = useBreadcrumbs (Routen);
Konsole.log (Breadcrumbs)
zurückkehren (
<Navi>
 {breadcrumbs.map(({Übereinstimmung, Breadcrumb }) => (
<Schlüssel={match.url} mit={match.url} verknüpfen>
 {Breadcrumb} /
</Link>
 ))}
</nav>
 );
}
ExportStandard Semmelbrösel;

Die Link-Komponente wird aus der React-Router-Dom-Bibliothek importiert. Mit dieser Komponente erstellen Sie Verknüpfungen zu anderen Teilen der Anwendung. Du kannst auch geschützte Wege schaffen mit der Link-Komponente.

Ein Array von Routenobjekten wird erstellt. Jedes Routenobjekt enthält einen Pfad und eine Breadcrumb-Eigenschaft. Die path-Eigenschaft entspricht dem URL-Pfad und die Breadcrumb-Eigenschaft entspricht dem Namen des Breadcrumbs.

Der Breadcrumbs verwenden Hook wird verwendet, um die Breadcrumbs zu erstellen. Dieser Hook akzeptiert ein Array von Routen als Parameter. Die Routen werden verwendet, um die Breadcrumbs zu generieren.

Die Map-Methode wird verwendet, um über das Array von Breadcrumbs zu iterieren. Für jeden Breadcrumb a Komponente erstellt wird. Die Link-Komponente hat a Zu prop, die dem URL-Pfad des Breadcrumbs entspricht. Der Breadcrumb selbst wird als Inhalt der gerendert Komponente.

Jetzt können Sie den Semmelbröseln etwas Styling hinzufügen. Erstellen Sie eine neue CSS-Datei und benennen Sie sie Breadcrumbs.css. Fügen Sie danach die folgenden CSS-Regeln zur Datei hinzu:

.breadcrumb-nicht-aktiv {
 Farbe: #cccccc;
}
.breadcrumb-aktiv {
 Farbe: #000000;
}

Jetzt können Sie die CSS-Datei in die React-Komponente importieren und die Breadcrumb-Klassen zu der hinzufügen Komponenten:

importieren { Link, useLocation } aus 'reagieren-router-dom'
importieren Breadcrumbs verwenden aus 'use-react-router-breadcrumbs'
importieren "./Breadcrumbs.css";
konst Routen = [
 { Weg: '/users/:userId', Brotkrümel: 'Beispiel 1' },
 { Weg: '/data', Brotkrümel: 'Beispiel 2' }
];
FunktionSemmelbrösel() {
konst breadcrumbs = useBreadcrumbs (Routen);
konst location = useLocation()
zurückkehren (
<Navi>
 {breadcrumbs.map(({Übereinstimmung, Breadcrumb }) => (
<Verknüpfung 
 key={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "paniermehl-aktiv": "Breadcrumb-nicht-aktiv"}
>
 {Breadcrumb} / 
</Link>
 ))}
</nav>
 );
}
ExportStandard Semmelbrösel;

Erhöhen Sie das Benutzerengagement mit Breadcrumbs

Mit Breadcrumbs können Sie den Benutzern nicht nur helfen zu verstehen, wo sie sich auf Ihrer Website befinden, sondern Sie können auch die Benutzerinteraktion erhöhen. Breadcrumbs können verwendet werden, um den Fortschritt des Benutzers bei einer Aufgabe anzuzeigen, z. B. bei einem Anmeldevorgang oder einem Kauf. Indem Sie den Fortschritt des Benutzers anzeigen, können Sie ihn ermutigen, die Aufgabe abzuschließen.

Es gibt auch viele andere Dinge, die Sie bei der Gestaltung einer Website beachten sollten, wie z. B. Benutzerfreundlichkeit, Zugänglichkeit und Mobilfreundlichkeit. Wenn Sie diese Dinge jedoch im Hinterkopf behalten, können Sie eine Website erstellen, die sowohl benutzerfreundlich als auch ansprechend ist.