Heb je ooit die kleine stukjes tekst op sommige websites opgemerkt die je huidige locatie binnen de site aangeven? Dit worden breadcrumbs genoemd en ze kunnen een handige manier zijn om gebruikers te oriënteren, vooral bij het navigeren door complexe websites. Dit artikel laat je zien hoe je breadcrumbs maakt in React.js.
Wat zijn broodkruimels en hoe zijn ze belangrijk?
Breadcrumbs zijn meestal kleine stukjes tekst die de huidige locatie binnen een website aangeven. Ze kunnen nuttig zijn bij het oriënteren van gebruikers, vooral bij het navigeren door websites met meerdere pagina's. Door een spoor van links te bieden, kunnen breadcrumbs gebruikers helpen te begrijpen waar ze zich binnen een website bevinden en kunnen ze gemakkelijk terug navigeren naar vorige secties.
Het is belangrijk op te merken dat breadcrumbs niet mogen worden gebruikt als het primaire navigatiemiddel op een website. Ze moeten eerder worden gebruikt naast andere navigatie-elementen zoals een menu of zoekbalk.
Hoe broodkruimels te maken in React.js
Er zijn twee belangrijke manieren om breadcrumbs te maken in React.js: door de reactie-router-dom bibliotheek of met behulp van de gebruik-reageren-router-breadcrumbs bibliotheek. Maar voordat je begint, moet je maak een React-app.
Methode 1: door de react-router-dom-bibliotheek te gebruiken
Met de react-router-dom-bibliotheek kunt u handmatig breadcrumbs maken voor elk pad in uw React-toepassing. De bibliotheek biedt een component die kan worden gebruikt om breadcrumbs te maken.
Om de react-router-dom-bibliotheek te gebruiken, moet u deze eerst installeren met behulp van npm:
npm installeren reactie-router-domNadat de bibliotheek is geïnstalleerd, kunt u deze importeren in uw React-component:
importeren { Koppeling } van 'reageren-router-dom'U kunt dan gebruik maken van de component om breadcrumbs te maken:
<Link naar="/">Thuis</Link>
<Link naar="/products">Producten</Link>
<Link naar="/products/1">Artikel 1</Link>Nu kunt u wat styling aan de broodkruimels toevoegen en de huidige pagina markeren waarop u zich bevindt. Daarvoor kun je de naam van de klasse prop van de bestanddeel. Om de huidige padnaam te krijgen, kunt u de plaats object uit de bibliotheek react-router-dom:
importeren { Link, gebruik Locatie } van 'reageren-router-dom'
functiePaneermeel() {
const locatie = gebruikLocatie();
opbrengst (
<navigatie>
<Link naar="/"
className={locatie.padnaam "/"? "breadcrumb-actief": "breadcrumb-niet-actief"}
>
Thuis
</Link>
<Link naar="/products"
className={locatie.padnaam.startsWith("/products")? "breadcrumb-actief": "breadcrumb-niet-actief"}
>
Producten
</Link>
<Link naar="/products/1"
className={locatie.padnaam "/products/1"? "breadcrumb-actief": "breadcrumb-niet-actief"}
>
Artikel 1
</Link>
</nav>
);
}
exporterenstandaard Paneermeel;Maak nu een nieuw CSS-bestand en geef het een naam broodkruimels.css. Voeg de volgende CSS-regels toe aan het bestand:
.breadcrumb-niet-actief {
kleur: #cccccc;
}
.breadcrumb-actief {
kleur: #000000;
}
.breadcrumb-pijl {
marge-links: 10px;
marge-rechts: 10px;
}Importeer nu uw CSS-bestand in uw React-component en voeg de breadcrumb-pijl klas voor jou componenten:
importeren { Link, gebruik Locatie } van 'reageren-router-dom'
importeren "./broodkruimels.css";
functiePaneermeel() {
const locatie = gebruikLocatie();
opbrengst (
<navigatie>
<Link naar="/"
className={locatie.padnaam "/"? "breadcrumb-actief": "breadcrumb-niet-actief"}
>
Thuis
</Link>
<span className="breadcrumb-pijl">></span>
<Link naar="/products"
className={locatie.padnaam.startsWith("/products")? "breadcrumb-actief": "breadcrumb-niet-actief"}
>
Producten
</Link>
<span className="breadcrumb-pijl">></span>
<Link naar="/products/1"
className={locatie.padnaam "/products/1"? "breadcrumb-actief": "breadcrumb-niet-actief"}
>
Artikel 1
</Link>
</nav>
);
}
exporterenstandaard Paneermeel;Er zijn verschillende soorten hooks in React. De bibliotheek van de react-router-dom gebruikLocatie hook geeft je toegang tot het locatie-object, dat informatie bevat over het huidige URL-pad.
De component className prop voegt een CSS-klasse toe aan de breadcrumbs. De prop className neemt een tekenreeks of een reeks tekenreeksen. Als het een tekenreeks is, wordt de tekenreeks als een enkele klasse aan het element toegevoegd. Als het een reeks strings is, wordt elke string in de array toegevoegd als een afzonderlijke klasse.
De begint met methode controleert of de huidige padnaam begint met "/products". Dit komt omdat de breadcrumb voor de productenpagina niet alleen actief moet zijn wanneer het pad "/products" is, maar ook wanneer het pad "/products/1", "/products/2", enz. is.
Methode 2: door gebruik te maken van de use-react-router-breadcrumbs-bibliotheek
Een andere manier om breadcrumbs te maken in React is door gebruik te maken van de use-react-router-breadcrumbs-bibliotheek. Deze bibliotheek genereert automatisch breadcrumbs op basis van de routes die zijn gedefinieerd in uw React-applicatie.
Om deze bibliotheek te gebruiken, moet u deze eerst installeren met behulp van npm:
npm installerengebruik-reageer-router-broodkruimelsNadat de bibliotheek is geïnstalleerd, kunt u deze importeren in uw React-component:
importeren gebruik Broodkruimels van 'gebruik-reageren-router-breadcrumbs'U kunt dan gebruik maken van de gebruik Broodkruimels haak om broodkruimels te maken:
const breadcrumbs = gebruikBreadcrumbs();
troosten.log (paneermeel);Hiermee wordt een reeks breadcrumb-objecten naar de console gelogd. Elk breadcrumb-object bevat informatie over de route, zoals de naam, het pad en de parameters.
Nu kunt u uw breadcrumbs op het scherm weergeven. U kunt de component uit de react-router-bibliotheek om uw breadcrumbs te maken:
importeren { Koppeling } van 'reageren-router-dom'
importeren gebruik Broodkruimels van 'gebruik-reageren-router-breadcrumbs'
const trajecten = [
{pad: '/users/:userId', paneermeel: 'voorbeeld 1' },
{pad: '/data', paneermeel: 'Voorbeeld 2' }
];
functiePaneermeel() {
const breadcrumbs = gebruikBreadcrumbs (routes);
troosten.log (paneermeel)
opbrengst (
<navigatie>
{breadcrumbs.map(({ match, breadcrumb }) => (
<Sleutel={match.url} koppelen aan={match.url}>
{broodkruimel} /
</Link>
))}
</nav>
);
}
exporterenstandaard Paneermeel;De component Link wordt geïmporteerd uit de bibliotheek react-router-dom. U gebruikt dit onderdeel om koppelingen naar andere delen van de applicatie te maken. Je kan ook maak beschermde routes met behulp van de Link-component.
Er wordt een reeks routeobjecten gemaakt. Elk routeobject bevat een pad en een breadcrumb-eigenschap. De eigenschap path komt overeen met het URL-pad en de eigenschap breadcrumb komt overeen met de naam van de breadcrumb.
De gebruik Broodkruimels haak wordt gebruikt om de broodkruimels te maken. Deze hook accepteert een reeks routes als parameter. De routes worden gebruikt om de breadcrumbs te genereren.
De kaartmethode wordt gebruikt om de reeks breadcrumbs te herhalen. Voor elke broodkruimel, een onderdeel wordt gemaakt. De Link-component heeft een naar prop, wat overeenkomt met het URL-pad van de breadcrumb. De breadcrumb zelf wordt weergegeven als de inhoud van het bestanddeel.
Nu kun je wat styling toevoegen aan de broodkruimels. Maak een nieuw CSS-bestand en geef het een naam Broodkruimels.css. Voeg daarna de volgende CSS-regels toe aan het bestand:
.breadcrumb-niet-actief {
kleur: #cccccc;
}
.breadcrumb-actief {
kleur: #000000;
}Nu kunt u het CSS-bestand importeren in de React-component en de breadcrumb-klassen toevoegen aan het componenten:
importeren { Link, gebruik Locatie } van 'reageren-router-dom'
importeren gebruik Broodkruimels van 'gebruik-reageren-router-breadcrumbs'
importeren "./Broodkruimels.css";
const trajecten = [
{pad: '/users/:userId', paneermeel: 'voorbeeld 1' },
{pad: '/data', paneermeel: 'Voorbeeld 2' }
];
functiePaneermeel() {
const breadcrumbs = gebruikBreadcrumbs (routes);
const locatie = gebruikLocatie()
opbrengst (
<navigatie>
{breadcrumbs.map(({ match, breadcrumb }) => (
<Koppeling
key={match.url}
naar={match.url}
className={match.padnaam locatie.padnaam? "breadcrumb-actief": "breadcrumb-niet-actief"}
>
{broodkruimel} /
</Link>
))}
</nav>
);
}
exporterenstandaard Paneermeel;
Verhoog de gebruikersbetrokkenheid met breadcrumbs
Met breadcrumbs kunt u gebruikers niet alleen helpen begrijpen waar ze zich binnen uw website bevinden, maar kunt u ook de betrokkenheid van gebruikers vergroten. Breadcrumbs kunnen worden gebruikt om de voortgang van de gebruiker door een taak te laten zien, zoals een aanmeldingsproces of een aankoop. Door de voortgang van de gebruiker te tonen, kunt u hem/haar aanmoedigen om de taak te voltooien.
Er zijn ook veel andere dingen waar u rekening mee moet houden bij het ontwerpen van een website, zoals bruikbaarheid, toegankelijkheid en mobielvriendelijkheid. Als u deze dingen echter in gedachten houdt, kunt u een website maken die zowel gebruiksvriendelijk als aantrekkelijk is.
