Забелязвали ли сте някога онези малки парчета текст на някои уебсайтове, които означават текущото ви местоположение в сайта? Те се наричат ​​навигационни трохи и могат да бъдат полезен начин за ориентиране на потребителите, особено когато навигирате през сложни уебсайтове. Тази статия ще ви покаже как да създадете навигационни пътеки в React.js.

Какво представляват Breadcrumbs и колко са важни?

Навигационните пътеки обикновено са малки парчета текст, които показват текущото местоположение в рамките на уебсайт. Те могат да бъдат полезни при ориентиране на потребителите, особено при навигиране през уебсайтове с няколко страници. Чрез осигуряване на следа от връзки, навигационните пътеки могат да помогнат на потребителите да разберат къде се намират в рамките на уебсайт и да им позволят лесно да се връщат обратно към предишни секции.

Важно е да се отбележи, че навигацията не трябва да се използва като основно средство за навигация в уебсайт. По-скоро те трябва да се използват в допълнение към други елементи за навигация като меню или лента за търсене.

instagram viewer

Как да създадете Breadcrumbs в React.js

Има два основни начина за създаване на навигационни пътеки в React.js: чрез използване на реагират-рутер-дом библиотека или чрез използване на use-react-router-breadcrumbs библиотека. Но преди да започнете, трябва създайте приложение React.

Метод 1: Чрез използване на библиотеката react-router-dom

С библиотеката react-router-dom можете ръчно да създавате навигационни пътеки за всеки път във вашето приложение React. Библиотеката предоставя a компонент, който може да се използва за създаване на галета.

За да използвате библиотеката react-router-dom, първо трябва да я инсталирате с помощта на npm:

npm Инсталирай реагират-рутер-дом

След като библиотеката е инсталирана, можете да я импортирате във вашия React компонент:

импортиране { Връзка } от 'react-router-dom'

След това можете да използвате компонент за създаване на галета:

<Връзка към="/">У дома</Link>
<Връзка към="/products">Продукти</Link>
<Връзка към="/products/1">Продукт 1</Link>

Сега можете да добавите малко стил към навигационните трохи и да маркирате текущата страница, на която се намирате. За това можете да използвате className опора на компонент. За да получите текущия път, можете да използвате местоположение обект от библиотеката react-router-dom:

импортиране { Link, useLocation } от 'react-router-dom'
функциягалета() {
конст местоположение = useLocation();
връщане (
<нав>
<Връзка към="/"
 className={location.pathname "/"? "breadcrumb-active": "навигационен път-не-активен"}
>
 У дома
</Link>
<Връзка към="/products"
 className={location.pathname.startsWith("/products")? "breadcrumb-active": "навигационен път-не-активен"}
>
 Продукти
</Link>
<Връзка към="/products/1"
 className={location.pathname "/products/1"? "breadcrumb-active": "навигационен път-не-активен"}
>
 Продукт 1
</Link>
</nav>
 );
}
износпо подразбиране галета;

Сега създайте нов CSS файл и го наименувайте breadcrumbs.css. Добавете следните CSS правила към файла:

.breadcrumb-not-active {
 цвят: #cccccc;
}
.breadcrumb-active {
 цвят: #000000;
}
.breadcrumb-стрелка {
 margin-left: 10px;
 margin-right: 10px;
}

Сега импортирайте вашия CSS файл във вашия React компонент и добавете галета-стрелка клас на вашия компоненти:

импортиране { Link, useLocation } от 'react-router-dom'
импортиране "./breadcrumbs.css";
функциягалета() {
конст местоположение = useLocation();
връщане (
<нав>
<Връзка към="/"
 className={location.pathname "/"? "breadcrumb-active": "навигационен път-не-активен"}
>
 У дома
</Link>
<span className="галета-стрелка">&gt;</span>
<Връзка към="/products"
 className={location.pathname.startsWith("/products")? "breadcrumb-active": "навигационен път-не-активен"}
>
 Продукти
</Link>
<span className="галета-стрелка">&gt;</span>
<Връзка към="/products/1"
 className={location.pathname "/products/1"? "breadcrumb-active": "навигационен път-не-активен"}
>
 Продукт 1
</Link>
</nav>
 );
}
износпо подразбиране галета;

Има различни видове кукички в React. Библиотеката на react-router-dom useLocation hook ви дава достъп до обекта за местоположение, който има информация за текущия URL път.

The подложката className на компонента добавя CSS клас към навигационните пътеки. Пропът className приема низ или масив от низове. Ако това е низ, той ще добави низа като единичен клас към елемента. Ако това е масив от низове, всеки низ в масива ще се добави като отделен клас.

The започва с метод проверява дали текущият пътека започва с "/products". Това е така, защото навигационният път за страницата с продукти трябва да е активен не само когато пътят е „/products“, но и когато пътят е „/products/1“, „/products/2“ и т.н.

Метод 2: Чрез използване на библиотеката use-react-router-breadcrumbs

Друг начин за създаване на навигационни пътеки в React е чрез използване на библиотеката use-react-router-breadcrumbs. Тази библиотека автоматично генерира навигационни пътеки въз основа на маршрутите, дефинирани във вашето приложение React.

За да използвате тази библиотека, първо трябва да я инсталирате с помощта на npm:

npm Инсталирайизползване-react-router-breadcrumbs

След като библиотеката е инсталирана, можете да я импортирате във вашия React компонент:

импортиране useBreadcrumbs от 'use-react-router-breadcrumbs'

След това можете да използвате useBreadcrumbs кука за създаване на галета:

конст галета = useBreadcrumbs();
конзола.log (галета);

Това ще регистрира масив от навигационни обекти в конзолата. Всеки навигационен обект съдържа информация за маршрута, като име, път и параметри.

Сега можете да изобразите вашите галета на екрана. Можете да използвате компонент от библиотеката на react-router, за да създадете вашите навигационни пътеки:

импортиране { Връзка } от 'react-router-dom'
импортиране useBreadcrumbs от 'use-react-router-breadcrumbs'
конст маршрути = [
 {път: '/users/:userId', галета: 'Пример 1' },
 {път: '/data', галета: 'Пример 2' }
];
функциягалета() {
конст breadcrumbs = useBreadcrumbs (маршрути);
конзола.log (галета)
връщане (
<нав>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Link key={match.url} към={match.url}>
 {breadcrumb} /
</Link>
 ))}
</nav>
 );
}
износпо подразбиране галета;

Компонентът Link се импортира от библиотеката react-router-dom. Ще използвате този компонент за създаване на връзки към други части на приложението. Можете също създаване на защитени маршрути с помощта на компонента Link.

Създава се масив от обекти на маршрута. Всеки обект на маршрут съдържа път и свойство на навигационен път. Свойството път съответства на URL пътя, а свойството навигационен път съответства на името на навигационния път.

The useBreadcrumbs куката се използва за създаване на галета. Тази кука приема масив от маршрути като параметър. Маршрутите се използват за генериране на галета.

Методът map се използва за итериране на масива от навигационни трохи. За всяка галета, a се създава компонент. Компонентът Link има a да се prop, който съответства на URL пътя на навигационния път. Самият навигационен път се изобразява като съдържание на компонент.

Сега можете да добавите малко стил към галета. Създайте нов CSS файл и го наименувайте Breadcrumbs.css. След това добавете следните CSS правила към файла:

.breadcrumb-not-active {
 цвят: #cccccc;
}
.breadcrumb-active {
 цвят: #000000;
}

Сега можете да импортирате CSS файла в компонента React и да добавите навигационните класове към компоненти:

импортиране { Link, useLocation } от 'react-router-dom'
импортиране useBreadcrumbs от 'use-react-router-breadcrumbs'
импортиране "./Breadcrumbs.css";
конст маршрути = [
 {път: '/users/:userId', галета: 'Пример 1' },
 {път: '/data', галета: 'Пример 2' }
];
функциягалета() {
конст breadcrumbs = useBreadcrumbs (маршрути);
конст местоположение = useLocation()
връщане (
<нав>
 {breadcrumbs.map(({ match, breadcrumb }) => (
<Връзка 
 ключ={match.url} 
 до={match.url}
 className={match.pathname location.pathname? "breadcrumb-active": "навигационен път-не-активен"}
>
 {breadcrumb} / 
</Link>
 ))}
</nav>
 );
}
износпо подразбиране галета;

Увеличете ангажираността на потребителите с Breadcrumbs

С навигационните трохи можете не само да помогнете на потребителите да разберат къде се намират във вашия уебсайт, но можете също така да увеличите ангажираността на потребителите. Навигационните пътеки могат да се използват за показване на напредъка на потребителя чрез задача, като например процес на регистрация или покупка. Като показвате напредъка на потребителя, можете да го насърчите да изпълни задачата.

Има и много други неща, които трябва да имате предвид, когато проектирате уебсайт, като използваемост, достъпност и удобство за мобилни устройства. Въпреки това, ако имате предвид тези неща, можете да създадете уебсайт, който е едновременно удобен за потребителя и ангажиращ.