Hai mai notato quei piccoli pezzi di testo su alcuni siti Web che indicano la tua posizione attuale all'interno del sito? Questi sono chiamati breadcrumb e possono essere un modo utile per orientare gli utenti, specialmente durante la navigazione attraverso siti web complessi. Questo articolo ti mostrerà come creare breadcrumb in React.js.

Cosa sono i breadcrumb e quanto sono importanti?

I breadcrumb sono tipicamente piccoli pezzi di testo che mostrano la posizione corrente all'interno di un sito web. Possono essere utili per orientare gli utenti, soprattutto durante la navigazione su siti Web con più pagine. Fornendo una scia di collegamenti, i breadcrumb possono aiutare gli utenti a capire dove si trovano all'interno di un sito Web e consentire loro di tornare facilmente alle sezioni precedenti.

È importante notare che i breadcrumb non devono essere utilizzati come mezzo principale di navigazione su un sito web. Piuttosto, dovrebbero essere utilizzati in aggiunta ad altri elementi di navigazione come un menu o una barra di ricerca.

instagram viewer

Come creare breadcrumb in React.js

Ci sono due modi principali per creare breadcrumb in React.js: usando il reagisci-router-dom libreria o utilizzando il use-react-router-briciole di pane biblioteca. Ma prima di iniziare, devi creare un'app React.

Metodo 1: utilizzando la libreria react-router-dom

Con la libreria react-router-dom, puoi creare manualmente breadcrumb per ogni percorso nella tua applicazione React. La biblioteca fornisce un componente che può essere utilizzato per creare breadcrumb.

Per utilizzare la libreria react-router-dom, devi prima installarla usando npm:

npm installare reagisci-router-dom

Una volta che la libreria è stata installata, puoi importarla nel tuo componente React:

importare { Collegamento } da 'reagire-router-dom'

È quindi possibile utilizzare il componente per creare breadcrumb:

<Collegamento a="/">Casa</Link>
<Collegamento a="/products">Prodotti</Link>
<Collegamento a="/products/1">Prodotto 1</Link>

Ora puoi aggiungere uno stile ai breadcrumb ed evidenziare la pagina corrente in cui ti trovi. Per questo, puoi usare il nome della classe puntello del componente. Per ottenere il percorso corrente, puoi usare il file posizione oggetto dalla libreria react-router-dom:

importare { Link, usaPosizione } da 'reagire-router-dom'
funzioneBriciole di pane() {
cost posizione = useLocation();
ritorno (
<nav>
<Collegamento a="/"
 className={posizione.percorso "/"? "breadcrumb attivo": "breadcrumb-non-attivo"}
>
 Casa
</Link>
<Collegamento a="/products"
 className={location.pathname.startsWith("/products")? "breadcrumb attivo": "breadcrumb-non-attivo"}
>
 Prodotti
</Link>
<Collegamento a="/products/1"
 className={posizione.percorso "/products/1"? "breadcrumb attivo": "breadcrumb-non-attivo"}
>
 Prodotto 1
</Link>
</nav>
 );
}
esportarepredefinito Briciole di pane;

Ora crea un nuovo file CSS e assegnagli un nome pangrattato.css. Aggiungi le seguenti regole CSS al file:

.breadcrumb-non-attivo {
 colore: #cccccc;
}
.breadcrumb-attivo {
 colore: #000000;
}
.breadcrumb-freccia {
 margine sinistro: 10px;
 margine destro: 10px;
}

Ora importa il tuo file CSS nel tuo componente React e aggiungi il file breadcrumb-freccia classe al tuo componenti:

importare { Link, usaPosizione } da 'reagire-router-dom'
importare "./breadcrumbs.css";
funzioneBriciole di pane() {
cost posizione = useLocation();
ritorno (
<nav>
<Collegamento a="/"
 className={posizione.percorso "/"? "breadcrumb attivo": "breadcrumb-non-attivo"}
>
 Casa
</Link>
<span className="breadcrumb-freccia">&gt;</span>
<Collegamento a="/products"
 className={location.pathname.startsWith("/products")? "breadcrumb attivo": "breadcrumb-non-attivo"}
>
 Prodotti
</Link>
<span className="breadcrumb-freccia">&gt;</span>
<Collegamento a="/products/1"
 className={posizione.percorso "/products/1"? "breadcrumb attivo": "breadcrumb-non-attivo"}
>
 Prodotto 1
</Link>
</nav>
 );
}
esportarepredefinito Briciole di pane;

Ci sono diversi tipi di hook in React. La libreria react-router-dom usaPosizione hook ti dà accesso all'oggetto location, che contiene informazioni sul percorso dell'URL corrente.

IL Il prop className del componente aggiunge una classe CSS al breadcrumb. Il prop className accetta una stringa o un array di stringhe. Se è una stringa, aggiungerà la stringa come singola classe all'elemento. Se si tratta di un array di stringhe, ogni stringa nell'array verrà aggiunta come classe separata.

IL inizia con Il metodo controlla se il percorso corrente inizia con "/products". Questo perché il breadcrumb per la pagina dei prodotti dovrebbe essere attivo non solo quando il percorso è "/prodotti" ma anche quando il percorso è "/prodotti/1", "/prodotti/2", ecc.

Metodo 2: utilizzando la libreria use-react-router-breadcrumbs

Un altro modo per creare breadcrumb in React è utilizzare la libreria use-react-router-breadcrumbs. Questa libreria genera automaticamente breadcrumb in base ai percorsi definiti nella tua applicazione React.

Per utilizzare questa libreria, devi prima installarla utilizzando npm:

npm installareutilizzo-react-router-briciole di pane

Una volta che la libreria è stata installata, puoi importarla nel tuo componente React:

importare usaBreadcrumbs da 'usare-reagire-router-breadcrumb'

È quindi possibile utilizzare il usaBreadcrumbs gancio per creare pangrattato:

cost briciole di pane = useBreadcrumbs();
consolare.log (pangrattato);

Questo registrerà un array di oggetti breadcrumb nella console. Ogni oggetto breadcrumb contiene informazioni sulla rotta, come il nome, il percorso e i parametri.

Ora puoi visualizzare i tuoi breadcrumb sullo schermo. Puoi usare il componente dalla libreria react-router per creare il tuo breadcrumb:

importare { Collegamento } da 'reagire-router-dom'
importare usaBreadcrumbs da 'usare-reagire-router-breadcrumb'
cost percorsi = [
 { sentiero: '/users/:userId', Percorso di navigazione: 'Esempio 1' },
 { sentiero: '/data', Percorso di navigazione: 'Esempio 2' }
];
funzioneBriciole di pane() {
cost breadcrumbs = useBreadcrumbs (percorsi);
consolare.log (pangrattato)
ritorno (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Chiave di collegamento={match.url} a={match.url}>
 {Percorso di navigazione} /
</Link>
 ))}
</nav>
 );
}
esportarepredefinito Briciole di pane;

Il componente Link viene importato dalla libreria react-router-dom. Utilizzerai questo componente per creare collegamenti ad altre parti dell'applicazione. Puoi anche creare percorsi protetti utilizzando il componente Link.

Viene creato un array di oggetti percorso. Ogni oggetto route contiene un percorso e una proprietà breadcrumb. La proprietà path corrisponde al percorso dell'URL e la proprietà breadcrumb corrisponde al nome del breadcrumb.

IL usaBreadcrumbs gancio viene utilizzato per creare il pangrattato. Questo hook accetta un array di route come parametro. I percorsi vengono utilizzati per generare i breadcrumb.

Il metodo map viene utilizzato per iterare sull'array di breadcrumb. Per ogni pangrattato, a componente viene creato. Il componente Link ha un A prop, che corrisponde al percorso URL del breadcrumb. Il breadcrumb stesso viene reso come il contenuto del file componente.

Ora puoi aggiungere un po' di stile al pangrattato. Crea un nuovo file CSS e assegnagli un nome Pangrattato.css. Successivamente, aggiungi le seguenti regole CSS al file:

.breadcrumb-non-attivo {
 colore: #cccccc;
}
.breadcrumb-attivo {
 colore: #000000;
}

Ora puoi importare il file CSS nel componente React e aggiungere le classi breadcrumb al file componenti:

importare { Link, usaPosizione } da 'reagire-router-dom'
importare usaBreadcrumbs da 'usare-reagire-router-breadcrumb'
importare "./Breadcrumbs.css";
cost percorsi = [
 { sentiero: '/users/:userId', Percorso di navigazione: 'Esempio 1' },
 { sentiero: '/data', Percorso di navigazione: 'Esempio 2' }
];
funzioneBriciole di pane() {
cost breadcrumbs = useBreadcrumbs (percorsi);
cost posizione = usaLocazione()
ritorno (
<nav>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Collegamento 
 chiave={match.url} 
 a={corrispondenza.url}
 className={match.pathname location.pathname? "breadcrumb attivo": "breadcrumb-non-attivo"}
>
 {Percorso di navigazione} / 
</Link>
 ))}
</nav>
 );
}
esportarepredefinito Briciole di pane;

Aumenta il coinvolgimento degli utenti con i breadcrumb

Con i breadcrumb, non solo puoi aiutare gli utenti a capire dove si trovano all'interno del tuo sito web, ma puoi anche aumentare il coinvolgimento degli utenti. I breadcrumb possono essere utilizzati per mostrare l'avanzamento dell'utente attraverso un'attività, come un processo di registrazione o un acquisto. Mostrando i progressi dell'utente, puoi incoraggiarlo a completare l'attività.

Ci sono anche molte altre cose che dovresti tenere a mente quando progetti un sito web come l'usabilità, l'accessibilità e la compatibilità con i dispositivi mobili. Tuttavia, se tieni a mente queste cose, puoi creare un sito web che sia allo stesso tempo intuitivo e coinvolgente.