Har du någonsin lagt märke till de där små bitarna av text på vissa webbplatser som anger din nuvarande plats på webbplatsen? De kallas brödsmulor, och de kan vara ett användbart sätt att orientera användare, särskilt när de navigerar genom komplexa webbplatser. Den här artikeln kommer att visa dig hur du skapar brödsmulor i React.js.

Vad är brödsmulor och hur är de viktiga?

Brödsmulor är vanligtvis små bitar av text som visar den aktuella platsen på en webbplats. De kan vara till hjälp för att orientera användare, särskilt när de navigerar genom webbplatser som har flera sidor. Genom att tillhandahålla ett spår av länkar kan brödsmulor hjälpa användare att förstå var de befinner sig på en webbplats och tillåta dem att enkelt navigera tillbaka till tidigare avsnitt.

Det är viktigt att notera att brödsmulor inte bör användas som det primära navigeringsmedlet på en webbplats. Snarare bör de användas tillsammans med andra navigeringselement som en meny eller sökfält.

Hur man skapar brödsmulor i React.js

instagram viewer

Det finns två huvudsakliga sätt att skapa brödsmulor i React.js: genom att använda reagera-router-dom biblioteket eller genom att använda använd-reagera-router-brödsmulor bibliotek. Men innan du börjar måste du skapa en React-app.

Metod 1: Genom att använda react-router-dom Library

Med react-router-dom-biblioteket kan du manuellt skapa brödsmulor för varje sökväg i din React-applikation. Biblioteket tillhandahåller en komponent som kan användas för att skapa ströbröd.

För att använda react-router-dom-biblioteket måste du först installera det med npm:

npm Installera reagera-router-dom

När biblioteket har installerats kan du importera det till din React-komponent:

importera { Länk } från "reagera-router-dom"

Du kan sedan använda komponent för att skapa brödsmulor:

<Länk till ="/">Hem</Link>
<Länk till ="/products">Produkter</Link>
<Länk till ="/products/1">Produkt 1</Link>

Nu kan du lägga till lite styling till brödsmulorna och markera den aktuella sidan som du är på. För det kan du använda klassnamn rekvisita av komponent. För att få det aktuella sökvägsnamnet kan du använda plats objekt från react-router-dom-biblioteket:

importera { Länk, använd plats } från "reagera-router-dom"
fungeraStröbröd() {
konst plats = useLocation();
lämna tillbaka (
<nav>
<Länk till ="/"
 className={location.pathname "/"? "ströbrödsaktiv": "brödsmula-icke-aktiv"}
>
 Hem
</Link>
<Länk till ="/products"
 className={location.pathname.startsWith("/products")? "ströbrödsaktiv": "brödsmula-icke-aktiv"}
>
 Produkter
</Link>
<Länk till ="/products/1"
 className={location.pathname "/products/1"? "ströbrödsaktiv": "brödsmula-icke-aktiv"}
>
 Produkt 1
</Link>
</nav>
 );
}
exporterastandard Ströbröd;

Skapa nu en ny CSS-fil och namnge den brödsmulor.css. Lägg till följande CSS-regler i filen:

.breadcrumb-not-active {
 Färg: #cccccc;
}
.brödsmula-aktiv {
 Färg: #000000;
}
.brödsmula-pil {
 marginal-vänster: 10px;
 marginal-höger: 10px;
}

Importera nu din CSS-fil till din React-komponent och lägg till brödsmulor-pil klass till din komponenter:

importera { Länk, använd plats } från "reagera-router-dom"
importera "./brödsmulor.css";
fungeraStröbröd() {
konst plats = useLocation();
lämna tillbaka (
<nav>
<Länk till ="/"
 className={location.pathname "/"? "ströbrödsaktiv": "brödsmula-icke-aktiv"}
>
 Hem
</Link>
<span className="brödsmulor-pil">&gt;</span>
<Länk till ="/products"
 className={location.pathname.startsWith("/products")? "ströbrödsaktiv": "brödsmula-icke-aktiv"}
>
 Produkter
</Link>
<span className="brödsmulor-pil">&gt;</span>
<Länk till ="/products/1"
 className={location.pathname "/products/1"? "ströbrödsaktiv": "brödsmula-icke-aktiv"}
>
 Produkt 1
</Link>
</nav>
 );
}
exporterastandard Ströbröd;

Det finns olika typer av krokar i React. React-router-dom-biblioteket använd plats hook ger dig tillgång till platsobjektet, som har information om den aktuella URL-sökvägen.

De komponentens className prop lägger till en CSS-klass till brödsmulorna. ClassName-propet tar en sträng eller en array av strängar. Om det är en sträng lägger den till strängen som en enda klass till elementet. Om det är en array av strängar kommer varje sträng i arrayen att läggas till som en separat klass.

De börjar med metod kontrollerar om det aktuella sökvägsnamnet börjar med "/produkter". Detta beror på att brödsmulan för produktsidan ska vara aktiv inte bara när sökvägen är "/produkter" utan också när sökvägen är "/produkter/1", "/produkter/2" osv.

Metod 2: Genom att använda use-react-router-breadcrumbs Library

Ett annat sätt att skapa brödsmulor i React är genom att använda biblioteket use-react-router-breadcrumbs. Detta bibliotek genererar automatiskt brödsmulor baserat på de rutter som definieras i din React-applikation.

För att använda det här biblioteket måste du först installera det med npm:

npm Installeraanvända sig av-reagera-router-brödsmulor

När biblioteket har installerats kan du importera det till din React-komponent:

importera använd Brödsmulor från "använd-reagera-router-brödsmulor"

Du kan sedan använda använd Brödsmulor krok för att skapa brödsmulor:

konst breadcrumbs = useBreadcrumbs();
trösta.log (brödsmulor);

Detta kommer att logga en rad brödsmulor-objekt till konsolen. Varje brödsmuleobjekt innehåller information om rutten, såsom namn, sökväg och parametrar.

Nu kan du återge dina brödsmulor till skärmen. Du kan använda komponent från react-router-biblioteket för att skapa dina brödsmulor:

importera { Länk } från "reagera-router-dom"
importera använd Brödsmulor från "använd-reagera-router-brödsmulor"
konst rutter = [
 { sökväg: '/users/:userId', brödsmula: 'Exempel 1' },
 { sökväg: '/data', brödsmula: 'Exempel 2' }
];
fungeraStröbröd() {
konst brödsmulor = användBrödsmulor (rutter);
trösta.log (brödsmulor)
lämna tillbaka (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Länknyckel={match.url} till={match.url}>
 {brödsmula} /
</Link>
 ))}
</nav>
 );
}
exporterastandard Ströbröd;

Link-komponenten importeras från react-router-dom-biblioteket. Du kommer att använda den här komponenten för att skapa länkar till andra delar av applikationen. Du kan också skapa skyddade rutter med hjälp av länkkomponenten.

En array av ruttobjekt skapas. Varje ruttobjekt innehåller en sökväg och en brödsmuleegenskap. Egenskapen path motsvarar URL-sökvägen och breadcrumb-egenskapen motsvarar namnet på brödsmulan.

De använd Brödsmulor krok används för att skapa brödsmulorna. Denna krok accepterar en rad rutter som en parameter. Rutterna används för att generera brödsmulorna.

Kartmetoden används för att iterera över matrisen av brödsmulor. För varje ströbröd, en komponenten skapas. Länkkomponenten har en till prop, som motsvarar webbsmulans webbadress. Själva brödsmulan återges som innehållet i komponent.

Nu kan du lägga till lite styling till ströbrödet. Skapa en ny CSS-fil och namnge den Brödsmulor.css. Efter det lägger du till följande CSS-regler i filen:

.breadcrumb-not-active {
 Färg: #cccccc;
}
.brödsmula-aktiv {
 Färg: #000000;
}

Nu kan du importera CSS-filen till React-komponenten och lägga till brödsmuleklasserna till komponenter:

importera { Länk, använd plats } från "reagera-router-dom"
importera använd Brödsmulor från "använd-reagera-router-brödsmulor"
importera "./Brödsmulor.css";
konst rutter = [
 { sökväg: '/users/:userId', brödsmula: 'Exempel 1' },
 { sökväg: '/data', brödsmula: 'Exempel 2' }
];
fungeraStröbröd() {
konst brödsmulor = användBrödsmulor (rutter);
konst plats = useLocation()
lämna tillbaka (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Länk 
 key={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "ströbrödsaktiv": "brödsmula-icke-aktiv"}
>
 {brödsmula} / 
</Link>
 ))}
</nav>
 );
}
exporterastandard Ströbröd;

Öka användarens engagemang med brödsmulor

Med brödsmulor kan du inte bara hjälpa användare att förstå var de befinner sig på din webbplats, utan du kan också öka användarnas engagemang. Brödsmulor kan användas för att visa användarens framsteg genom en uppgift, till exempel en registreringsprocess eller ett köp. Genom att visa användarens framsteg kan du uppmuntra dem att slutföra uppgiften.

Det finns också många andra saker som du bör tänka på när du designar en webbplats som användbarhet, tillgänglighet och mobilvänlighet. Men om du har dessa saker i åtanke kan du skapa en webbplats som är både användarvänlig och engagerande.