Да ли сте икада приметили те мале делове текста на неким веб локацијама који означавају вашу тренутну локацију на сајту? Оне се називају бреадцрумбс и могу бити од помоћи за оријентацију корисника, посебно када се крећу кроз сложене веб странице. Овај чланак ће вам показати како да направите бреадцрумбс у Реацт.јс.
Шта су презле и колико су важне?
Хлебне мрвице су обично мали делови текста који показују тренутну локацију на веб локацији. Они могу бити од помоћи у оријентацији корисника, посебно када се крећу кроз веб странице које имају неколико страница. Пружајући траг веза, крушне мрвице могу помоћи корисницима да разумеју где се налазе на веб локацији и омогућавају им да се лако врате на претходне одељке.
Важно је напоменути да хлебне мрвице не би требало да се користе као примарно средство за навигацију на веб локацији. Уместо тога, требало би да се користе као додатак другим елементима за навигацију као што су мени или трака за претрагу.
Како направити бреадцрумбс у Реацт.јс
Постоје два главна начина за креирање бреадцрумбс у Реацт.јс: коришћењем
реаговати-рутер-дом библиотеци или коришћењем усе-реацт-роутер-бреадцрумбс библиотека. Али пре него што почнете, морате направите Реацт апликацију.Метод 1: Коришћењем библиотеке реацт-роутер-дом
Са библиотеком реацт-роутер-дом, можете ручно креирати крушне мрвице за сваку путању у вашој Реацт апликацији. Библиотека пружа а компонента која се може користити за прављење хлебних мрвица.
Да бисте користили библиотеку реацт-роутер-дом, прво морате да је инсталирате користећи нпм:
нпм инсталирај реаговати-рутер-домКада је библиотека инсталирана, можете је увести у своју Реацт компоненту:
увоз { Линк } из 'реаговати-рутер-дом'Затим можете користити компонента за прављење хлебних мрвица:
<Линк то="/">Кућа</Link>
<Линк то="/products">Производи</Link>
<Линк то="/products/1">Производ 1</Link>Сада можете додати мало стила у крушне мрвице и истакнути тренутну страницу на којој се налазите. За то можете користити Назив класе проп оф тхе саставни део. Да бисте добили тренутни назив путање, можете користити локација објекат из библиотеке реацт-роутер-дом:
увоз { Линк, усеЛоцатион } из 'реаговати-рутер-дом'
функцијаХлебне мрвице() {
конст локација = усеЛоцатион();
повратак (
<нав>
<Линк то="/"
цлассНаме={лоцатион.патхнаме "/"? "бреадцрумб-активан": "бреадцрумб-не-активан"}
>
Кућа
</Link>
<Линк то="/products"
цлассНаме={лоцатион.патхнаме.стартсВитх("/products")? "бреадцрумб-активан": "бреадцрумб-не-активан"}
>
Производи
</Link>
<Линк то="/products/1"
цлассНаме={лоцатион.патхнаме "/products/1"? "бреадцрумб-активан": "бреадцрумб-не-активан"}
>
Производ 1
</Link>
</nav>
);
}
извозУобичајено Бреадцрумбс;Сада креирајте нову ЦСС датотеку и дајте јој назив бреадцрумбс.цсс. Додајте следећа ЦСС правила у датотеку:
.бреадцрумб-нот-ацтиве {
боја: #цццццц;
}
.бреадцрумб-ацтиве {
боја: #000000;
}
.хлебна стрелица {
маргин-лефт: 10пк;
маргин-ригхт: 10пк;
}Сада увезите своју ЦСС датотеку у своју Реацт компоненту и додајте мрвица-стрелица класе свом компоненте:
увоз { Линк, усеЛоцатион } из 'реаговати-рутер-дом'
увоз "./бреадцрумбс.цсс";
функцијаХлебне мрвице() {
конст локација = усеЛоцатион();
повратак (
<нав>
<Линк то="/"
цлассНаме={лоцатион.патхнаме "/"? "бреадцрумб-активан": "бреадцрумб-не-активан"}
>
Кућа
</Link>
<спан цлассНаме="мрвица-стрелица">&гт;</span>
<Линк то="/products"
цлассНаме={лоцатион.патхнаме.стартсВитх("/products")? "бреадцрумб-активан": "бреадцрумб-не-активан"}
>
Производи
</Link>
<спан цлассНаме="мрвица-стрелица">&гт;</span>
<Линк то="/products/1"
цлассНаме={лоцатион.патхнаме "/products/1"? "бреадцрумб-активан": "бреадцрумб-не-активан"}
>
Производ 1
</Link>
</nav>
);
}
извозУобичајено Бреадцрумбс;Постоје различите врсте кукица у Реацт-у. Реацт-роутер-дом библиотека усеЛоцатион хоок вам даје приступ објекту локације, који има информације о тренутној УРЛ путањи.
Тхе компонента цлассНаме пропс додаје ЦСС класу у бреадцрумбс. ЦлассНаме пропс узима стринг или низ стрингова. Ако је стринг, он ће елементу додати стринг као једну класу. Ако је то низ стрингова, сваки стринг у низу ће се додати као засебна класа.
Тхе почиње са метода проверава да ли тренутна путања почиње са "/продуцтс". То је зато што би навигација за страницу производа требало да буде активна не само када је путања „/продуцтс“ већ и када је путања „/продуцтс/1“, „/продуцтс/2“ итд.
Метод 2: Коришћењем библиотеке усе-реацт-роутер-бреадцрумбс
Други начин за креирање бреадцрумбс у Реацт-у је коришћење библиотеке усе-реацт-роутер-бреадцрумбс. Ова библиотека аутоматски генерише бреадцрумбс на основу рута дефинисаних у вашој Реацт апликацији.
Да бисте користили ову библиотеку, прво ћете морати да је инсталирате користећи нпм:
нпм инсталирајкористити-реаговати-рутер-бреадцрумбсКада је библиотека инсталирана, можете је увести у своју Реацт компоненту:
увоз усеБреадцрумбс из 'усе-реацт-роутер-бреадцрумбс'Затим можете користити усеБреадцрумбс кука за прављење хлебних мрвица:
конст бреадцрумбс = усеБреадцрумбс();
конзола.лог (хлебне мрвице);Ово ће евидентирати низ објеката бреадцрумб на конзоли. Сваки објекат крушне путање садржи информације о рути, као што су име, путања и параметри.
Сада можете да прикажете своје хлебне мрвице на екрану. Можете користити компонента из библиотеке реацт-роутер за креирање ваших хлебних мрвица:
увоз { Линк } из 'реаговати-рутер-дом'
увоз усеБреадцрумбс из 'усе-реацт-роутер-бреадцрумбс'
конст руте = [
{пут: '/users/:userId', презла: 'Пример 1' },
{пут: '/data', презла: 'Пример 2' }
];
функцијаХлебне мрвице() {
конст бреадцрумбс = усеБреадцрумбс (руте);
конзола.лог (хлебне мрвице)
повратак (
<нав>
{бреадцрумбс.мап(({ матцх, бреадцрумбс }) => (
<Кључ везе={матцх.урл} то={матцх.урл}>
{бреадцрумб} /
</Link>
))}
</nav>
);
}
извозУобичајено Бреадцрумбс;Компонента Линк је увезена из библиотеке реацт-роутер-дом. Ову компоненту ћете користити за креирање веза до других делова апликације. Можете такође креирати заштићене руте користећи компоненту Линк.
Креира се низ објеката руте. Сваки објекат руте садржи путању и својство бреадцрумб. Својство путање одговара УРЛ путањи, а својство бреадцрумб одговара имену путање.
Тхе усеБреадцрумбс кука се користи за прављење презла. Ова кука прихвата низ рута као параметар. Руте се користе за генерисање хлебних мрвица.
Метод мапе се користи за понављање низа хлебних мрвица. За сваку презлу, а компонента је створена. Компонента Линк има а до проп, који одговара УРЛ путањи хлебне путање. Сама хлебна мрвица се приказује као садржај саставни део.
Сада можете додати мало стила у презле. Направите нову ЦСС датотеку и дајте јој назив Бреадцрумбс.цсс. Након тога, додајте следећа ЦСС правила у датотеку:
.бреадцрумб-нот-ацтиве {
боја: #цццццц;
}
.бреадцрумб-ацтиве {
боја: #000000;
}Сада можете да увезете ЦСС датотеку у компоненту Реацт и додате класе бреадцрумб у компоненте:
увоз { Линк, усеЛоцатион } из 'реаговати-рутер-дом'
увоз усеБреадцрумбс из 'усе-реацт-роутер-бреадцрумбс'
увоз "./Бреадцрумбс.цсс";
конст руте = [
{пут: '/users/:userId', презла: 'Пример 1' },
{пут: '/data', презла: 'Пример 2' }
];
функцијаХлебне мрвице() {
конст бреадцрумбс = усеБреадцрумбс (руте);
конст локација = усеЛоцатион()
повратак (
<нав>
{бреадцрумбс.мап(({ матцх, бреадцрумбс }) => (
<Линк
кеи={матцх.урл}
то={матцх.урл}
цлассНаме={матцх.патхнаме лоцатион.патхнаме? "бреадцрумб-активан": "бреадцрумб-не-активан"}
>
{бреадцрумб} /
</Link>
))}
</nav>
);
}
извозУобичајено Бреадцрумбс;
Повећајте ангажовање корисника помоћу хлебних мрвица
Помоћу крушних мрвица не само да можете помоћи корисницима да разумеју где се налазе на вашој веб локацији, већ можете и да повећате ангажовање корисника. Хлебне мрвице се могу користити да се покаже напредак корисника кроз задатак, као што је процес регистрације или куповине. Показујући напредак корисника, можете га подстаћи да заврши задатак.
Постоје и многе друге ствари које треба да имате на уму када дизајнирате веб локацију, као што су употребљивост, приступачност и прилагођеност мобилним уређајима. Међутим, ако имате ове ствари на уму, можете направити веб локацију која је и лака за корисника и привлачна.