Har du nogensinde lagt mærke til de små stykker tekst på nogle websteder, der angiver din nuværende placering på webstedet? Disse kaldes brødkrummer, og de kan være en nyttig måde at orientere brugere på, især når de navigerer gennem komplekse websteder. Denne artikel viser dig, hvordan du opretter brødkrummer i React.js.

Hvad er brødkrummer, og hvordan er de vigtige?

Brødkrummer er typisk små stykker tekst, der viser den aktuelle placering på et websted. De kan være nyttige til at orientere brugerne, især når de navigerer gennem websteder med flere sider. Ved at give et spor af links kan brødkrummer hjælpe brugerne med at forstå, hvor de er på et websted og give dem mulighed for nemt at navigere tilbage til tidligere sektioner.

Det er vigtigt at bemærke, at brødkrummer ikke bør bruges som det primære navigationsmiddel på en hjemmeside. De bør snarere bruges som supplement til andre navigationselementer såsom en menu eller søgelinje.

Sådan opretter du brødkrummer i React.js

Der er to hovedmåder at skabe brødkrummer i React.js: ved at bruge

instagram viewer
reagere-router-dom bibliotek eller ved at bruge brug-reager-router-brødkrummer bibliotek. Men før du starter, skal du oprette en React-app.

Metode 1: Ved at bruge react-router-dom-biblioteket

Med react-router-dom-biblioteket kan du manuelt oprette brødkrummer for hver sti i din React-applikation. Biblioteket tilbyder en komponent, der kan bruges til at skabe brødkrummer.

For at bruge react-router-dom-biblioteket skal du først installere det ved hjælp af npm:

npm installere reagere-router-dom

Når biblioteket er blevet installeret, kan du importere det til din React-komponent:

importere { Link } fra 'reager-router-dom'

Du kan derefter bruge komponent til at skabe brødkrummer:

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

Nu kan du tilføje lidt styling til brødkrummerne og fremhæve den aktuelle side, du er på. Til det kan du bruge klassenavn rekvisit af komponent. For at få det aktuelle stinavn kan du bruge Beliggenhed objekt fra react-router-dom-biblioteket:

importere { Link, useLocation } fra 'reager-router-dom'
fungereBrødkrummer() {
konst location = useLocation();
Vend tilbage (
<nav>
<Link til ="/"
 className={placering.stinavn "/"? "brødkrumme-aktiv": "brødkrumme-ikke-aktiv"}
>
 Hjem
</Link>
<Link til ="/products"
 className={location.pathname.startsWith("/products")? "brødkrumme-aktiv": "brødkrumme-ikke-aktiv"}
>
 Produkter
</Link>
<Link til ="/products/1"
 className={placering.stinavn "/products/1"? "brødkrumme-aktiv": "brødkrumme-ikke-aktiv"}
>
 Produkt 1
</Link>
</nav>
 );
}
eksportStandard Brødkrummer;

Opret nu en ny CSS-fil og navngiv den brødkrummer.css. Tilføj følgende CSS-regler til filen:

.brødkrumme-ikke-aktiv {
 farve: #cccccc;
}
.brødkrumme-aktiv {
 farve: #000000;
}
.brødkrumme-pil {
 margin-venstre: 10px;
 margin-højre: 10px;
}

Importer nu din CSS-fil til din React-komponent og tilføj brødkrumme-pil klasse til din komponenter:

importere { Link, useLocation } fra 'reager-router-dom'
importere "./brødkrummer.css";
fungereBrødkrummer() {
konst location = useLocation();
Vend tilbage (
<nav>
<Link til ="/"
 className={placering.stinavn "/"? "brødkrumme-aktiv": "brødkrumme-ikke-aktiv"}
>
 Hjem
</Link>
<span className="brødkrumme-pil">&gt;</span>
<Link til ="/products"
 className={location.pathname.startsWith("/products")? "brødkrumme-aktiv": "brødkrumme-ikke-aktiv"}
>
 Produkter
</Link>
<span className="brødkrumme-pil">&gt;</span>
<Link til ="/products/1"
 className={placering.stinavn "/products/1"? "brødkrumme-aktiv": "brødkrumme-ikke-aktiv"}
>
 Produkt 1
</Link>
</nav>
 );
}
eksportStandard Brødkrummer;

Der er forskellige typer kroge i React. React-router-dom-biblioteket brugPlacering hook giver dig adgang til lokationsobjektet, som har information om den aktuelle URL-sti.

Det komponentens className-prop tilføjer en CSS-klasse til brødkrummerne. ClassName prop tager en streng eller et array af strenge. Hvis det er en streng, tilføjer den strengen som en enkelt klasse til elementet. Hvis det er et array af strenge, tilføjes hver streng i arrayet som en separat klasse.

Det starter med metoden kontrollerer, om det aktuelle stinavn starter med "/produkter". Dette skyldes, at brødkrummen til produktsiden ikke kun skal være aktiv, når stien er "/produkter", men også når stien er "/produkter/1", "/produkter/2" osv.

Metode 2: Ved at bruge use-react-router-breadcrumbs Library

En anden måde at oprette brødkrummer i React på er ved at bruge use-react-router-breadcrumbs-biblioteket. Dette bibliotek genererer automatisk brødkrummer baseret på de ruter, der er defineret i din React-applikation.

For at bruge dette bibliotek skal du først installere det ved hjælp af npm:

npm installerebrug-reager-router-brødkrummer

Når biblioteket er blevet installeret, kan du importere det til din React-komponent:

importere brug brødkrummer fra 'brug-reager-router-brødkrummer'

Du kan derefter bruge brug brødkrummer krog for at skabe brødkrummer:

konst brødkrummer = brugBrødkrummer();
konsol.log (brødkrummer);

Dette vil logge en række brødkrummeobjekter til konsollen. Hvert brødkrummeobjekt indeholder oplysninger om ruten, såsom navn, sti og parametre.

Nu kan du gengive dine brødkrummer til skærmen. Du kan bruge komponent fra react-router-biblioteket for at skabe dine brødkrummer:

importere { Link } fra 'reager-router-dom'
importere brug brødkrummer fra 'brug-reager-router-brødkrummer'
konst ruter = [
 { sti: '/users/:userId', brødkrumme: 'Eksempel 1' },
 { sti: '/data', brødkrumme: 'Eksempel 2' }
];
fungereBrødkrummer() {
konst brødkrummer = brugBrødkrummer (ruter);
konsol.log (brødkrummer)
Vend tilbage (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Linknøgle={match.url} til={match.url}>
 {brødkrumme} /
</Link>
 ))}
</nav>
 );
}
eksportStandard Brødkrummer;

Link-komponenten importeres fra react-router-dom-biblioteket. Du skal bruge denne komponent til at oprette links til andre dele af applikationen. Du kan også skabe beskyttede ruter ved hjælp af Link-komponenten.

Der oprettes en række ruteobjekter. Hvert ruteobjekt indeholder en sti og en brødkrummeegenskab. Egenskaben path svarer til URL-stien, og egenskaben breadcrumb svarer til navnet på breadcrumben.

Det brug brødkrummer krog bruges til at skabe brødkrummerne. Denne krog accepterer en række ruter som en parameter. Ruterne bruges til at generere brødkrummerne.

Kortmetoden bruges til at iterere over rækken af ​​brødkrummer. For hver brødkrumme, en komponent oprettes. Link-komponenten har en til prop, som svarer til URL-stien til brødkrummen. Selve brødkrummen gengives som indholdet af komponent.

Nu kan du tilføje lidt styling til brødkrummerne. Opret en ny CSS-fil og navngiv den Brødkrummer.css. Derefter skal du tilføje følgende CSS-regler til filen:

.brødkrumme-ikke-aktiv {
 farve: #cccccc;
}
.brødkrumme-aktiv {
 farve: #000000;
}

Nu kan du importere CSS-filen til React-komponenten og tilføje brødkrummeklasserne til komponenter:

importere { Link, useLocation } fra 'reager-router-dom'
importere brug brødkrummer fra 'brug-reager-router-brødkrummer'
importere "./Brødkrummer.css";
konst ruter = [
 { sti: '/users/:userId', brødkrumme: 'Eksempel 1' },
 { sti: '/data', brødkrumme: 'Eksempel 2' }
];
fungereBrødkrummer() {
konst brødkrummer = brugBrødkrummer (ruter);
konst location = useLocation()
Vend tilbage (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Link 
 key={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "brødkrumme-aktiv": "brødkrumme-ikke-aktiv"}
>
 {brødkrumme} / 
</Link>
 ))}
</nav>
 );
}
eksportStandard Brødkrummer;

Øg brugerengagementet med brødkrummer

Med brødkrummer kan du ikke kun hjælpe brugerne med at forstå, hvor de er på dit websted, men du kan også øge brugerengagementet. Brødkrummer kan bruges til at vise brugerens fremskridt gennem en opgave, såsom en tilmeldingsproces eller et køb. Ved at vise brugerens fremskridt kan du opmuntre dem til at fuldføre opgaven.

Der er også mange andre ting, du bør huske på, når du designer en hjemmeside, såsom brugervenlighed, tilgængelighed og mobilvenlighed. Men hvis du har disse ting i tankerne, kan du lave en hjemmeside, der både er brugervenlig og engagerende.