Har du noen gang lagt merke til de små tekstbitene på enkelte nettsteder som indikerer din nåværende plassering på nettstedet? Disse kalles brødsmuler, og de kan være en nyttig måte å orientere brukere på, spesielt når de navigerer gjennom komplekse nettsteder. Denne artikkelen vil vise deg hvordan du lager brødsmuler i React.js.

Hva er brødsmuler og hvordan er de viktige?

Brødsmuler er vanligvis små tekstbiter som viser den nåværende plasseringen på et nettsted. De kan være nyttige for å orientere brukere, spesielt når de navigerer gjennom nettsteder som har flere sider. Ved å gi et spor med lenker, kan brødsmuler hjelpe brukere å forstå hvor de er på et nettsted og la dem enkelt navigere tilbake til tidligere seksjoner.

Det er viktig å merke seg at brødsmuler ikke bør brukes som det primære navigasjonsmiddelet på et nettsted. De bør heller brukes i tillegg til andre navigasjonselementer som en meny eller søkefelt.

Hvordan lage brødsmuler i React.js

Det er to hovedmåter å lage brødsmuler i React.js: ved å bruke

instagram viewer
reager-ruter-dom biblioteket eller ved å bruke bruk-reager-ruter-brødsmuler bibliotek. Men før du begynner, må du lage en React-app.

Metode 1: Ved å bruke react-router-dom Library

Med react-router-dom-biblioteket kan du manuelt lage brødsmuler for hver bane i React-applikasjonen din. Biblioteket tilbyr en komponent som kan brukes til å lage brødsmuler.

For å bruke react-router-dom-biblioteket, må du først installere det ved å bruke npm:

npm installere reager-ruter-dom

Når biblioteket er installert, kan du importere det til React-komponenten din:

import { Link } fra 'reager-ruter-dom'

Du kan da bruke komponent for å lage brødsmuler:

<Link til ="/">Hjem</Link>
<Link til ="/products">Produkter</Link>
<Link til ="/products/1">Produkt 1</Link>

Nå kan du legge til litt styling til brødsmulene og fremheve den gjeldende siden du er på. For det kan du bruke klassenavn rekvisitt av komponent. For å få gjeldende banenavn kan du bruke plassering objekt fra react-router-dom-biblioteket:

import { Link, useLocation } fra 'reager-ruter-dom'
funksjonBrødsmuler() {
konst plassering = brukPlassering();
komme tilbake (
<nav>
<Link til ="/"
 className={location.pathname "/"? "brødsmule-aktiv": "brødsmule-ikke-aktiv"}
>
 Hjem
</Link>
<Link til ="/products"
 className={location.pathname.startsWith("/products")? "brødsmule-aktiv": "brødsmule-ikke-aktiv"}
>
 Produkter
</Link>
<Link til ="/products/1"
 className={location.pathname "/products/1"? "brødsmule-aktiv": "brødsmule-ikke-aktiv"}
>
 Produkt 1
</Link>
</nav>
 );
}
eksportmisligholde Brødsmuler;

Opprett nå en ny CSS-fil og navngi den brødsmuler.css. Legg til følgende CSS-regler i filen:

.brødsmule-ikke-aktiv {
 farge: #cccccc;
}
.brødsmule-aktiv {
 farge: #000000;
}
.brødsmule-pil {
 marg-venstre: 10px;
 marg-høyre: 10px;
}

Importer nå CSS-filen din til React-komponenten og legg til brødsmule-pil klasse til din komponenter:

import { Link, useLocation } fra 'reager-ruter-dom'
import "./brødsmuler.css";
funksjonBrødsmuler() {
konst plassering = brukPlassering();
komme tilbake (
<nav>
<Link til ="/"
 className={location.pathname "/"? "brødsmule-aktiv": "brødsmule-ikke-aktiv"}
>
 Hjem
</Link>
<span className="brødsmule-pil">&gt;</span>
<Link til ="/products"
 className={location.pathname.startsWith("/products")? "brødsmule-aktiv": "brødsmule-ikke-aktiv"}
>
 Produkter
</Link>
<span className="brødsmule-pil">&gt;</span>
<Link til ="/products/1"
 className={location.pathname "/products/1"? "brødsmule-aktiv": "brødsmule-ikke-aktiv"}
>
 Produkt 1
</Link>
</nav>
 );
}
eksportmisligholde Brødsmuler;

Det er ulike typer kroker i React. React-router-dom-biblioteket brukPlassering hook gir deg tilgang til lokasjonsobjektet, som har informasjon om gjeldende URL-bane.

De komponentens className-prop legger til en CSS-klasse til brødsmulene. ClassName-proppet tar en streng eller en rekke strenger. Hvis det er en streng, vil den legge til strengen som en enkelt klasse til elementet. Hvis det er en rekke strenger, vil hver streng i matrisen legges til som en egen klasse.

De begynner med metoden sjekker om gjeldende banenavn starter med "/produkter". Dette er fordi brødsmulen for produktsiden skal være aktiv ikke bare når banen er "/produkter", men også når banen er "/produkter/1", "/produkter/2", osv.

Metode 2: Ved å bruke use-react-router-breadcrumbs Library

En annen måte å lage brødsmuler i React på er å bruke use-react-router-breadcrumbs-biblioteket. Dette biblioteket genererer automatisk brødsmuler basert på rutene som er definert i din React-applikasjon.

For å bruke dette biblioteket, må du først installere det med npm:

npm installerebruk-reager-ruter-brødsmuler

Når biblioteket er installert, kan du importere det til React-komponenten din:

import bruk brødsmuler fra 'bruk-reager-ruter-brødsmuler'

Du kan da bruke bruk brødsmuler krok for å lage brødsmuler:

konst brødsmuler = brukBrødsmuler();
konsoll.log (brødsmuler);

Dette vil logge en rekke brødsmuleobjekter til konsollen. Hvert brødsmuleobjekt inneholder informasjon om ruten, for eksempel navn, bane og parametere.

Nå kan du gjengi brødsmulene dine på skjermen. Du kan bruke komponent fra react-router-biblioteket for å lage brødsmulene dine:

import { Link } fra 'reager-ruter-dom'
import bruk brødsmuler fra 'bruk-reager-ruter-brødsmuler'
konst ruter = [
 { bane: '/users/:userId', brødsmule: 'Eksempel 1' },
 { bane: '/data', brødsmule: 'Eksempel 2' }
];
funksjonBrødsmuler() {
konst brødsmuler = brukBrødsmuler (ruter);
konsoll.log (brødsmuler)
komme tilbake (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Link key={match.url} til={match.url}>
 {brødsmule} /
</Link>
 ))}
</nav>
 );
}
eksportmisligholde Brødsmuler;

Link-komponenten importeres fra react-router-dom-biblioteket. Du vil bruke denne komponenten til å lage lenker til andre deler av applikasjonen. Du kan også lage beskyttede ruter ved å bruke Link-komponenten.

En rekke ruteobjekter opprettes. Hvert ruteobjekt inneholder en bane og en brødsmuleegenskap. Path-egenskapen tilsvarer URL-banen, og breadcrumb-egenskapen tilsvarer navnet på breadcrumben.

De bruk brødsmuler kroken brukes til å lage brødsmulene. Denne kroken godtar en rekke ruter som en parameter. Rutene brukes til å generere brødsmulene.

Kartmetoden brukes til å iterere over utvalget av brødsmuler. For hver brødsmule, en komponenten er opprettet. Link-komponenten har en til prop, som tilsvarer URL-banen til brødsmulen. Selve brødsmulen er gjengitt som innholdet i komponent.

Nå kan du legge til litt styling til brødsmulene. Opprett en ny CSS-fil og navngi den Brødsmuler.css. Deretter legger du til følgende CSS-regler i filen:

.brødsmule-ikke-aktiv {
 farge: #cccccc;
}
.brødsmule-aktiv {
 farge: #000000;
}

Nå kan du importere CSS-filen til React-komponenten og legge til brødsmuleklassene til komponenter:

import { Link, useLocation } fra 'reager-ruter-dom'
import bruk brødsmuler fra 'bruk-reager-ruter-brødsmuler'
import "./Brødsmuler.css";
konst ruter = [
 { bane: '/users/:userId', brødsmule: 'Eksempel 1' },
 { bane: '/data', brødsmule: 'Eksempel 2' }
];
funksjonBrødsmuler() {
konst brødsmuler = brukBrødsmuler (ruter);
konst plassering = bruk sted()
komme tilbake (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Link 
 key={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "brødsmule-aktiv": "brødsmule-ikke-aktiv"}
>
 {brødsmule} / 
</Link>
 ))}
</nav>
 );
}
eksportmisligholde Brødsmuler;

Øk brukerengasjementet med brødsmuler

Med brødsmuler kan du ikke bare hjelpe brukere med å forstå hvor de er på nettstedet ditt, men du kan også øke brukerengasjementet. Brødsmuler kan brukes til å vise brukerens fremgang gjennom en oppgave, for eksempel en registreringsprosess eller et kjøp. Ved å vise brukerens fremgang kan du oppmuntre dem til å fullføre oppgaven.

Det er også mange andre ting du bør huske på når du designer en nettside, for eksempel brukervennlighet, tilgjengelighet og mobilvennlighet. Men hvis du har disse tingene i bakhodet, kan du lage en nettside som er både brukervennlig og engasjerende.