Jak stworzyć bułkę tartą w React.js

Czy zauważyłeś kiedyś te małe fragmenty tekstu na niektórych stronach internetowych oznaczające Twoją aktualną lokalizację w witrynie? Nazywane są one bułką tartą i mogą być pomocnym sposobem orientowania użytkowników, zwłaszcza podczas poruszania się po złożonych witrynach internetowych. W tym artykule dowiesz się, jak tworzyć bułkę tartą w React.js.

Czym są bułka tarta i jak są ważne?

Breadcrumbs to zazwyczaj małe fragmenty tekstu, które pokazują aktualną lokalizację w witrynie. Mogą być pomocne w orientowaniu użytkowników, zwłaszcza podczas poruszania się po witrynach posiadających kilka podstron. Zapewniając ścieżkę linków, bułka tarta może pomóc użytkownikom zrozumieć, gdzie się znajdują w witrynie i umożliwić im łatwą nawigację z powrotem do poprzednich sekcji.

Należy zauważyć, że bułka tarta nie powinna być używana jako podstawowy sposób nawigacji w witrynie. Należy ich raczej używać jako dodatku do innych elementów nawigacyjnych, takich jak menu lub pasek wyszukiwania.

Jak stworzyć bułkę tartą w React.js

Istnieją dwa główne sposoby tworzenia bułki tartej w React.js: za pomocą pliku reaguj-router-dom bibliotece lub za pomocą use-react-router-breadcrumbs biblioteka. Ale zanim zaczniesz, musisz stworzyć aplikację React.

Metoda 1: przy użyciu biblioteki react-router-dom

Dzięki bibliotece react-router-dom możesz ręcznie tworzyć ścieżki nawigacyjne dla każdej ścieżki w aplikacji React. Biblioteka udostępnia m komponent, który można wykorzystać do stworzenia bułki tartej.

Aby skorzystać z biblioteki react-router-dom, musisz ją najpierw zainstalować za pomocą npm:

np zainstalować reaguj-router-dom

Po zainstalowaniu biblioteki możesz zaimportować ją do swojego komponentu React:

import { Link } z „React-router-dom”

Możesz wtedy użyć tzw składnik do stworzenia bułki tartej:

<Link do ="/">Dom</Link>
<Link do ="/products">Produkty</Link>
<Link do ="/products/1">Produkt 1</Link>

Teraz możesz dodać stylizację do bułki tartej i wyróżnić bieżącą stronę, na której się znajdujesz. W tym celu możesz użyć tzw Nazwa klasy podpora część. Aby uzyskać bieżącą nazwę ścieżki, możesz użyć metody Lokalizacja obiekt z biblioteki react-router-dom:

import { Link, użyjLokalizacja} z „React-router-dom”
funkcjonowaćBułka tarta() {
konst lokalizacja = użyjLokalizacja();
powrót (
<nawigacja>
<Link do ="/"
 className={lokalizacja.nazwaścieżki "/"? "bułka tarta aktywna": "bułka tarta-nieaktywna"}
>
 Dom
</Link>
<Link do ="/products"
 className={lokalizacja.nazwaścieżki.startsWith("/products")? "bułka tarta aktywna": "bułka tarta-nieaktywna"}
>
 Produkty
</Link>
<Link do ="/products/1"
 className={lokalizacja.nazwaścieżki "/products/1"? "bułka tarta aktywna": "bułka tarta-nieaktywna"}
>
 Produkt 1
</Link>
</nav>
 );
}
eksportdomyślny Bułka tarta;

Teraz utwórz nowy plik CSS i nadaj mu nazwę bułka tarta.css. Dodaj następujące reguły CSS do pliku:

.breadcrumb-not-active {
 kolor: #cccccc;
}
.breadcrumb-aktywny {
 kolor: #000000;
}
.strzałka-bułki tartej {
 lewy margines: 10px;
 prawy margines: 10px;
}

Teraz zaimportuj plik CSS do komponentu React i dodaj plik bułka tarta-strzałka klasa do ciebie składniki:

import { Link, użyjLokalizacja} z „React-router-dom”
import "./bułka tarta.css";
funkcjonowaćBułka tarta() {
konst lokalizacja = użyjLokalizacja();
powrót (
<nawigacja>
<Link do ="/"
 className={lokalizacja.nazwaścieżki "/"? "bułka tarta aktywna": "bułka tarta-nieaktywna"}
>
 Dom
</Link>
<nazwa klasy rozpiętej ="bułka tarta-strzałka">&gt;</span>
<Link do ="/products"
 className={lokalizacja.nazwaścieżki.startsWith("/products")? "bułka tarta aktywna": "bułka tarta-nieaktywna"}
>
 Produkty
</Link>
<nazwa klasy rozpiętej ="bułka tarta-strzałka">&gt;</span>
<Link do ="/products/1"
 className={lokalizacja.nazwaścieżki "/products/1"? "bułka tarta aktywna": "bułka tarta-nieaktywna"}
>
 Produkt 1
</Link>
</nav>
 );
}
eksportdomyślny Bułka tarta;

Tam są różne rodzaje haków w React. Biblioteka reakcji-router-dom użyjLokalizacja hook daje dostęp do obiektu lokalizacji, który zawiera informacje o bieżącej ścieżce URL.

The właściwość className komponentu dodaje klasę CSS do bułki tartej. Właściwość className pobiera ciąg znaków lub tablicę ciągów znaków. Jeśli jest to ciąg, doda ciąg jako pojedynczą klasę do elementu. Jeśli jest to tablica łańcuchów, każdy ciąg w tablicy zostanie dodany jako oddzielna klasa.

The zaczynać z metoda sprawdza, czy bieżąca nazwa ścieżki zaczyna się od „/products”. Dzieje się tak, ponieważ ścieżka nawigacyjna dla strony produktów powinna być aktywna nie tylko wtedy, gdy ścieżka to „/products”, ale także wtedy, gdy ścieżka to „/products/1”, „/products/2” itp.

Metoda 2: przy użyciu biblioteki use-react-router-breadcrumbs

Innym sposobem tworzenia bułki tartej w React jest użycie biblioteki use-react-router-breadcrumbs. Ta biblioteka automatycznie generuje bułkę tartą na podstawie tras zdefiniowanych w Twojej aplikacji React.

Aby korzystać z tej biblioteki, najpierw musisz ją zainstalować za pomocą npm:

np zainstalowaćużywać-react-router-breadcrumbs

Po zainstalowaniu biblioteki możesz zaimportować ją do swojego komponentu React:

import użyj bułki tartej z „użyj-reaguj-router-breadcrumbs”

Możesz wtedy użyć tzw użyj bułki tartej haczyk do robienia bułki tartej:

konst bułka tarta = użyj bułki tartej();
konsola.log (bułka tarta);

Spowoduje to zarejestrowanie tablicy obiektów breadcrumb w konsoli. Każdy obiekt nawigacyjny zawiera informacje o trasie, takie jak nazwa, ścieżka i parametry.

Teraz możesz renderować bułkę tartą na ekranie. Możesz użyć komponent z biblioteki routera reagującego, aby utworzyć bułkę tartą:

import { Link } z „React-router-dom”
import użyj bułki tartej z „użyj-reaguj-router-breadcrumbs”
konst trasy = [
 { ścieżka: '/users/:userId', bułka tarta: 'Przykład 1' },
 { ścieżka: '/data', bułka tarta: 'Przykład 2' }
];
funkcjonowaćBułka tarta() {
konst bułka tarta = użyj bułki tartej (trasy);
konsola.log (bułka tarta)
powrót (
<nawigacja>
 {breadcrumbs.map(({dopasowanie, bułka tarta}) => (
<Link klucz={match.url} do={match.url}>
 {bułka tarta} /
</Link>
 ))}
</nav>
 );
}
eksportdomyślny Bułka tarta;

Komponent Link jest importowany z biblioteki react-router-dom. Będziesz używać tego komponentu do tworzenia linków do innych części aplikacji. Możesz również tworzyć chronione trasy za pomocą komponentu Link.

Tworzona jest tablica obiektów trasy. Każdy obiekt trasy zawiera ścieżkę i właściwość nawigacyjną. Właściwość path odpowiada ścieżce adresu URL, a właściwość breadcrumb odpowiada nazwie ścieżki nawigacyjnej.

The użyj bułki tartej hak służy do tworzenia bułki tartej. Ten hak akceptuje tablicę tras jako parametr. Trasy są używane do generowania bułki tartej.

Metoda map służy do iteracji po tablicy bułki tartej. Na każdą bułkę tartą a tworzony jest komponent. Komponent Link ma Do prop, który odpowiada ścieżce URL ścieżki nawigacyjnej. Sama bułka tarta jest renderowana jako zawartość pliku część.

Teraz możesz dodać trochę stylizacji do bułki tartej. Utwórz nowy plik CSS i nadaj mu nazwę Bułka tarta.css. Następnie dodaj do pliku następujące reguły CSS:

.breadcrumb-not-active {
 kolor: #cccccc;
}
.breadcrumb-aktywny {
 kolor: #000000;
}

Teraz możesz zaimportować plik CSS do komponentu React i dodać klasy nawigacyjne do składniki:

import { Link, użyjLokalizacja} z „React-router-dom”
import użyj bułki tartej z „użyj-reaguj-router-breadcrumbs”
import "./Okruszki chleba.css";
konst trasy = [
 { ścieżka: '/users/:userId', bułka tarta: 'Przykład 1' },
 { ścieżka: '/data', bułka tarta: 'Przykład 2' }
];
funkcjonowaćBułka tarta() {
konst bułka tarta = użyj bułki tartej (trasy);
konst lokalizacja = użyjLokalizacja()
powrót (
<nawigacja>
 {breadcrumbs.map(({dopasowanie, bułka tarta}) => (
<Połączyć 
 klucz={dopasowanie.url} 
 do={match.url}
 className={match.pathname location.pathname? "bułka tarta aktywna": "bułka tarta-nieaktywna"}
>
 {bułka tarta} / 
</Link>
 ))}
</nav>
 );
}
eksportdomyślny Bułka tarta;

Zwiększ zaangażowanie użytkowników dzięki Breadcrumbs

Dzięki bułce tartej możesz nie tylko pomóc użytkownikom zrozumieć, gdzie się znajdują w Twojej witrynie, ale także zwiększyć zaangażowanie użytkowników. Breadcrumbs może służyć do pokazywania postępów użytkownika w wykonywaniu zadania, takiego jak proces rejestracji lub zakup. Pokazując postępy użytkownika, możesz zachęcić go do wykonania zadania.

Istnieje również wiele innych rzeczy, o których należy pamiętać podczas projektowania strony internetowej, takich jak użyteczność, dostępność i przyjazność dla urządzeń mobilnych. Jeśli jednak będziesz o tym pamiętać, możesz stworzyć stronę internetową, która jest zarówno przyjazna dla użytkownika, jak i wciągająca.