Ar kada nors kai kuriose svetainėse pastebėjote tuos mažus teksto fragmentus, nurodančius jūsų dabartinę vietą svetainėje? Jie vadinami džiūvėsiais ir gali būti naudingas būdas orientuoti vartotojus, ypač naršant sudėtingose ​​svetainėse. Šiame straipsnyje bus parodyta, kaip React.js sukurti nuorodos kelius.

Kas yra duonos trupiniai ir kuo jie svarbūs?

Nurodymai paprastai yra mažos teksto dalys, rodančios dabartinę vietą svetainėje. Jie gali padėti orientuoti vartotojus, ypač naršant po kelis puslapius turinčias svetaines. Pateikdami nuorodų seką, naršymo keliukai gali padėti naudotojams suprasti, kur jie yra svetainėje, ir leisti jiems lengvai grįžti į ankstesnes dalis.

Svarbu pažymėti, kad džiūvėsėliai neturėtų būti naudojami kaip pagrindinė naršymo svetainėje priemonė. Atvirkščiai, jie turėtų būti naudojami kartu su kitais naršymo elementais, pvz., meniu arba paieškos juosta.

Kaip sukurti „Breadcrumbs“ naudojant React.js

Yra du pagrindiniai būdai React.js kurti nuorodos kelius: naudojant

instagram viewer
react-router-dom biblioteką arba naudodamiesi naudok-reaguok-maršrutizatorius-džiūvėsėlius biblioteka. Bet prieš pradėdami, turite sukurti programą „React“..

1 būdas: naudojant react-router-dom biblioteką

Naudodami „react-router-dom“ biblioteką galite neautomatiniu būdu sukurti kiekvieno kelio „React“ programoje nuorodos. Biblioteka suteikia a komponentas, kurį galima naudoti džiūvėsėliams kurti.

Norėdami naudoti react-router-dom biblioteką, pirmiausia turite ją įdiegti naudodami npm:

npm diegti react-router-dom

Įdiegę biblioteką galite importuoti ją į „React“ komponentą:

importuoti { Nuoroda } iš 'react-router-dom'

Tada galite naudoti džiūvėsėlių kūrimo komponentas:

<Nuoroda į ="/">Namai</Link>
<Nuoroda į ="/products">Produktai</Link>
<Nuoroda į ="/products/1">1 produktas</Link>

Dabar galite pridėti tam tikrą stilių prie džiūvėsėlių ir paryškinti dabartinį puslapį, kuriame esate. Tam galite naudoti klasės pavadinimas rekvizitas komponentas. Norėdami gauti dabartinį kelio pavadinimą, galite naudoti vieta objektas iš react-router-dom bibliotekos:

importuoti { Link, useLocation } iš 'react-router-dom'
funkcijaDuonos trupiniai() {
konst vieta = useLocation();
grąžinti (
<nav>
<Nuoroda į ="/"
 className={vietos.kelio pavadinimas "/"? "džiūvėsėlis-aktyvus": "džiūvėsėlis-neaktyvus"}
>
 Namai
</Link>
<Nuoroda į ="/products"
 className={location.pathname.startsWith("/products")? "džiūvėsėlis-aktyvus": "džiūvėsėlis-neaktyvus"}
>
 Produktai
</Link>
<Nuoroda į ="/products/1"
 className={vietos.kelio pavadinimas "/products/1"? "džiūvėsėlis-aktyvus": "džiūvėsėlis-neaktyvus"}
>
 1 produktas
</Link>
</nav>
 );
}
eksportuotinumatytas Duonos trupiniai;

Dabar sukurkite naują CSS failą ir pavadinkite jį džiūvėsėliai.css. Pridėkite šias CSS taisykles prie failo:

.duonos trupinys-neaktyvus {
 spalva: #cccccc;
}
.džiūvėsėlis-aktyvus {
 spalva: #000000;
}
.džiūvėsėlis-rodyklė {
 paraštė kairėje: 10 pikselių;
 paraštė dešinėje: 10 pikselių;
}

Dabar importuokite CSS failą į „React“ komponentą ir pridėkite džiūvėsėlis-rodyklė klasė į tavo komponentai:

importuoti { Link, useLocation } iš 'react-router-dom'
importuoti "./breadcrumbs.css";
funkcijaDuonos trupiniai() {
konst vieta = useLocation();
grąžinti (
<nav>
<Nuoroda į ="/"
 className={vietos.kelio pavadinimas "/"? "džiūvėsėlis-aktyvus": "džiūvėsėlis-neaktyvus"}
>
 Namai
</Link>
<span className="džiūvėsėlis-rodyklė">&gt;</span>
<Nuoroda į ="/products"
 className={location.pathname.startsWith("/products")? "džiūvėsėlis-aktyvus": "džiūvėsėlis-neaktyvus"}
>
 Produktai
</Link>
<span className="džiūvėsėlis-rodyklė">&gt;</span>
<Nuoroda į ="/products/1"
 className={vietos.kelio pavadinimas "/products/1"? "džiūvėsėlis-aktyvus": "džiūvėsėlis-neaktyvus"}
>
 1 produktas
</Link>
</nav>
 );
}
eksportuotinumatytas Duonos trupiniai;

Yra įvairių tipų kabliukai React. „React-router-dom“ biblioteka useLocation kabliukas suteikia prieigą prie vietos objekto, kuriame yra informacijos apie dabartinį URL kelią.

The komponento klasėsName pasiūlymas prideda CSS klasę į naršymo kelius. Klasės pavadinimo pasiūlymas užima eilutę arba eilučių masyvą. Jei tai yra eilutė, ji įtrauks į elementą kaip vieną klasę. Jei tai yra eilučių masyvas, kiekviena masyvo eilutė bus pridėta kaip atskira klasė.

The prasideda su metodas patikrina, ar dabartinis kelio pavadinimas prasideda „/products“. Taip yra todėl, kad produktų puslapio naršymo kelias turi būti aktyvus ne tik tada, kai kelias yra „/products“, bet ir tada, kai kelias yra „/products/1“, „/products/2“ ir kt.

2 būdas: naudojant „use-react-router-breadcrumbs“ biblioteką

Kitas būdas „React“ kurti nuorodos trupinius yra naudoti „use-react-router-breadcrumbs“ biblioteką. Ši biblioteka automatiškai generuoja naršymo kelius pagal jūsų „React“ programoje apibrėžtus maršrutus.

Norėdami naudoti šią biblioteką, pirmiausia turėsite ją įdiegti naudodami npm:

npm diegtinaudoti-reaguoti-maršrutizatorius-džiūvėsėliai

Įdiegę biblioteką galite importuoti ją į „React“ komponentą:

importuoti naudokite duonos trupinius iš „naudoti-reaguoti-maršrutizatorių-džiūvėsėlius“

Tada galite naudoti naudokite duonos trupinius kabliukas džiūvėsėliams sukurti:

konst duonos trupiniai = useBreadcrumbs();
konsolė.rąstas (džiūvėsėliai);

Taip į konsolę bus užregistruotas naršymo kelio objektų masyvas. Kiekviename naršymo kelio objekte yra informacijos apie maršrutą, pvz., pavadinimą, kelią ir parametrus.

Dabar ekrane galite pateikti džiūvėsius. Galite naudoti komponentas iš „react-router“ bibliotekos, kad sukurtumėte naršymo kelius:

importuoti { Nuoroda } iš 'react-router-dom'
importuoti naudokite duonos trupinius iš „naudoti-reaguoti-maršrutizatorių-džiūvėsėlius“
konst maršrutai = [
 { kelias: '/users/:userId', džiūvėsėliai: '1 pavyzdys' },
 { kelias: '/data', džiūvėsėliai: '2 pavyzdys' }
];
funkcijaDuonos trupiniai() {
konst duonos trupiniai = useBreadcrumbs (maršrutai);
konsolė.log (duonos trupiniai)
grąžinti (
<nav>
 {breadcrumbs.map(({ atitikmuo, duonos trupinys }) => (
<Nuorodos raktas={match.url} to={match.url}>
 {breadcrumb} /
</Link>
 ))}
</nav>
 );
}
eksportuotinumatytas Duonos trupiniai;

Komponentas Link yra importuojamas iš react-router-dom bibliotekos. Šį komponentą naudosite kurdami nuorodas į kitas programos dalis. Tu taip pat gali sukurti saugomus maršrutus naudojant nuorodų komponentą.

Sukuriamas maršruto objektų masyvas. Kiekviename maršruto objekte yra kelias ir naršymo kelio ypatybė. Kelio ypatybė atitinka URL kelią, o naršymo kelio ypatybė – naršymo kelio pavadinimą.

The naudokite duonos trupinius kabliukas naudojamas džiūvėsėliams sukurti. Šis kabliukas priima maršrutų masyvą kaip parametrą. Maršrutai naudojami duonos trupiniams generuoti.

Žemėlapio metodas naudojamas kartoti duonos trupinių masyvą. Kiekvienam džiūvėsėliui a sukurtas komponentas. Komponentas Link turi a į prop, kuris atitinka naršymo kelio URL kelią. Pats džiūvėsėlis pateikiamas kaip turinys komponentas.

Dabar galite pridėti šiek tiek stiliaus džiūvėsėliams. Sukurkite naują CSS failą ir pavadinkite jį Duonos trupiniai.css. Po to prie failo pridėkite šias CSS taisykles:

.duonos trupinys-neaktyvus {
 spalva: #cccccc;
}
.džiūvėsėlis-aktyvus {
 spalva: #000000;
}

Dabar galite importuoti CSS failą į „React“ komponentą ir pridėti naršymo kelio klases komponentai:

importuoti { Link, useLocation } iš 'react-router-dom'
importuoti naudokite duonos trupinius iš „naudoti-reaguoti-maršrutizatorių-džiūvėsėlius“
importuoti "./Breadcrumbs.css";
konst maršrutai = [
 { kelias: '/users/:userId', džiūvėsėliai: '1 pavyzdys' },
 { kelias: '/data', džiūvėsėliai: '2 pavyzdys' }
];
funkcijaDuonos trupiniai() {
konst duonos trupiniai = useBreadcrumbs (maršrutai);
konst vieta = useLocation()
grąžinti (
<nav>
 {breadcrumbs.map(({ atitikmuo, duonos trupinys }) => (
<Nuoroda 
 raktas={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "džiūvėsėlis-aktyvus": "džiūvėsėlis-neaktyvus"}
>
 {breadcrumb} / 
</Link>
 ))}
</nav>
 );
}
eksportuotinumatytas Duonos trupiniai;

Padidinkite naudotojų įsitraukimą naudodami „Breadcrumbs“.

Naudodami naršymo kelius galite ne tik padėti naudotojams suprasti, kur jie yra jūsų svetainėje, bet ir padidinti naudotojų įtraukimą. Nukreipimai gali būti naudojami norint parodyti naudotojo pažangą atliekant užduotį, pvz., prisiregistruojant arba perkant. Rodydami vartotojo pažangą, galite paskatinti jį atlikti užduotį.

Taip pat yra daug kitų dalykų, į kuriuos turėtumėte atsižvelgti kurdami svetainę, pvz., patogumą naudoti, prieinamumą ir mobiliesiems pritaikymą. Tačiau jei atsižvelgsite į šiuos dalykus, galite sukurti svetainę, kuri būtų patogi ir patraukli.