Вы когда-нибудь замечали эти маленькие фрагменты текста на некоторых веб-сайтах, обозначающие ваше текущее местоположение на сайте? Их называют хлебными крошками, и они могут быть полезным способом ориентирования пользователей, особенно при навигации по сложным веб-сайтам. Эта статья покажет вам, как создавать хлебные крошки в React.js.

Что такое хлебные крошки и насколько они важны?

Хлебные крошки обычно представляют собой небольшие фрагменты текста, которые показывают текущее местоположение на веб-сайте. Они могут быть полезны для ориентирования пользователей, особенно при навигации по веб-сайтам с несколькими страницами. Предоставляя след ссылок, хлебные крошки могут помочь пользователям понять, где они находятся на веб-сайте, и позволить им легко вернуться к предыдущим разделам.

Важно отметить, что хлебные крошки не следует использовать в качестве основного средства навигации по веб-сайту. Скорее, их следует использовать в дополнение к другим элементам навигации, таким как меню или панель поиска.

instagram viewer

Как создать хлебные крошки в React.js

Существует два основных способа создания хлебных крошек в React.js: с помощью реакция-маршрутизатор-дом библиотеку или с помощью использовать-реагировать-маршрутизатор-хлебные крошки библиотека. Но прежде чем начать, нужно создать приложение React.

Способ 1: с помощью библиотеки react-router-dom

С библиотекой react-router-dom вы можете вручную создавать хлебные крошки для каждого пути в вашем приложении React. Библиотека предоставляет компонент, который можно использовать для создания хлебных крошек.

Чтобы использовать библиотеку react-router-dom, вам сначала нужно установить ее с помощью npm:

нпм установить реакция-маршрутизатор-дом

После установки библиотеки вы можете импортировать ее в свой компонент React:

Импортировать { Связь } от 'реакция-маршрутизатор-дом'

Затем вы можете использовать Компонент для создания панировочных сухарей:

<Ссылка на ="/">Дом</Link>
<Ссылка на ="/products">Продукты</Link>
<Ссылка на ="/products/1">Продукт 1</Link>

Теперь вы можете добавить некоторые стили к хлебным крошкам и выделить текущую страницу, на которой вы находитесь. Для этого вы можете использовать className опора компонент. Чтобы получить текущий путь, вы можете использовать расположение объект из библиотеки react-router-dom:

Импортировать {Ссылка, использованиеместоположения} от 'реакция-маршрутизатор-дом'
функцияПанировочные сухари() {
константа местоположение = использованиеМестоположение();
возвращаться (
<навигация>
<Ссылка на ="/"
 className={location.pathname "/"? "хлебные крошки-активный": "панировочные сухари не активны"}
>
 Дом
</Link>
<Ссылка на ="/products"
 className={location.pathname.startsWith("/products")? "хлебные крошки-активный": "панировочные сухари не активны"}
>
 Продукты
</Link>
<Ссылка на ="/products/1"
 className={location.pathname "/products/1"? "хлебные крошки-активный": "панировочные сухари не активны"}
>
 Продукт 1
</Link>
</nav>
 );
}
экспортпо умолчанию Панировочные сухари;

Теперь создайте новый файл CSS и назовите его хлебные крошки.css. Добавьте в файл следующие правила CSS:

.breadcrumb-неактивен {
 цвет: #cccccc;
}
.breadcrumb-активный {
 цвет: #000000;
}
.breadcrumb-стрелка {
 поле слева: 10px;
 поле справа: 10px;
}

Теперь импортируйте файл CSS в компонент React и добавьте хлебная крошка-стрелка класс для вашего компоненты:

Импортировать {Ссылка, использованиеместоположения} от 'реакция-маршрутизатор-дом'
Импортировать "./breadcrumbs.css";
функцияПанировочные сухари() {
константа местоположение = использованиеМестоположение();
возвращаться (
<навигация>
<Ссылка на ="/"
 className={location.pathname "/"? "хлебные крошки-активный": "панировочные сухари не активны"}
>
 Дом
</Link>
<диапазон className="хлебная крошка-стрелка">&гт;</span>
<Ссылка на ="/products"
 className={location.pathname.startsWith("/products")? "хлебные крошки-активный": "панировочные сухари не активны"}
>
 Продукты
</Link>
<диапазон className="хлебная крошка-стрелка">&гт;</span>
<Ссылка на ="/products/1"
 className={location.pathname "/products/1"? "хлебные крошки-активный": "панировочные сухари не активны"}
>
 Продукт 1
</Link>
</nav>
 );
}
экспортпо умолчанию Панировочные сухари;

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

Свойство className компонента добавляет класс CSS в хлебные крошки. Свойство className принимает строку или массив строк. Если это строка, она добавит строку как один класс к элементу. Если это массив строк, каждая строка в массиве будет добавлена ​​как отдельный класс.

начинается с метод проверяет, начинается ли текущий путь с "/products". Это связано с тем, что навигационная цепочка для страницы продуктов должна быть активной не только при пути «/products», но и при пути «/products/1», «/products/2» и т. д.

Способ 2: с помощью библиотеки use-react-router-breadcrumbs

Еще один способ создать хлебные крошки в React — использовать библиотеку use-react-router-breadcrumbs. Эта библиотека автоматически генерирует хлебные крошки на основе маршрутов, определенных в вашем приложении React.

Чтобы использовать эту библиотеку, вам сначала нужно установить ее с помощью npm:

нпм установитьиспользовать-реагировать-маршрутизатор-хлебные крошки

После установки библиотеки вы можете импортировать ее в свой компонент React:

Импортировать использовать панировочные сухари от «использовать-реагировать-маршрутизатор-хлебные крошки»

Затем вы можете использовать использовать панировочные сухари крючок для создания панировочных сухарей:

константа хлебные крошки = использовать хлебные крошки();
консоль.log (хлебные крошки);

Это запишет в консоль массив объектов хлебных крошек. Каждый объект навигационной цепочки содержит информацию о маршруте, такую ​​как имя, путь и параметры.

Теперь вы можете вывести свои хлебные крошки на экран. Вы можете использовать компонент из библиотеки react-router для создания хлебных крошек:

Импортировать { Связь } от 'реакция-маршрутизатор-дом'
Импортировать использовать панировочные сухари от «использовать-реагировать-маршрутизатор-хлебные крошки»
константа маршруты = [
 { путь: '/users/:userId', панировочные сухари: 'Пример 1' },
 { путь: '/data', панировочные сухари: 'Пример 2' }
];
функцияПанировочные сухари() {
константа хлебные крошки = использовать хлебные крошки (маршруты);
консоль.log (хлебные крошки)
возвращаться (
<навигация>
 {breadcrumbs.map(({ совпадение, хлебные крошки }) => (
<Ключ ссылки = {match.url} на = {match.url}>
 {хлебные крошки} /
</Link>
 ))}
</nav>
 );
}
экспортпо умолчанию Панировочные сухари;

Компонент Link импортируется из библиотеки react-router-dom. Вы будете использовать этот компонент для создания ссылок на другие части приложения. Вы также можете создавать защищенные маршруты с помощью компонента Link.

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

использовать панировочные сухари крючок используется для создания панировочных сухарей. Этот хук принимает в качестве параметра массив маршрутов. Маршруты используются для генерации хлебных крошек.

Метод карты используется для перебора массива хлебных крошек. Для каждой хлебной крошки компонент создан. Компонент Link имеет к prop, который соответствует URL-пути хлебной крошки. Сама хлебная крошка отображается как содержимое компонент.

Теперь вы можете добавить некоторые стили к панировочным сухарям. Создайте новый файл CSS и назовите его Хлебные крошки.css. После этого добавьте в файл следующие правила CSS:

.breadcrumb-неактивен {
 цвет: #cccccc;
}
.breadcrumb-активный {
 цвет: #000000;
}

Теперь вы можете импортировать файл CSS в компонент React и добавить классы хлебных крошек в компоненты:

Импортировать {Ссылка, использованиеместоположения} от 'реакция-маршрутизатор-дом'
Импортировать использовать панировочные сухари от «использовать-реагировать-маршрутизатор-хлебные крошки»
Импортировать "./Breadcrumbs.css";
константа маршруты = [
 { путь: '/users/:userId', панировочные сухари: 'Пример 1' },
 { путь: '/data', панировочные сухари: 'Пример 2' }
];
функцияПанировочные сухари() {
константа хлебные крошки = использовать хлебные крошки (маршруты);
константа местоположение = использованиеМестоположение()
возвращаться (
<навигация>
 {breadcrumbs.map(({ совпадение, хлебные крошки }) => (
<Связь 
 ключ = {match.url} 
 to={match.url}
 className={match.pathname location.pathname? "хлебные крошки-активный": "панировочные сухари не активны"}
>
 {хлебные крошки} / 
</Link>
 ))}
</nav>
 );
}
экспортпо умолчанию Панировочные сухари;

Увеличьте вовлеченность пользователей с помощью «хлебных крошек»

С помощью хлебных крошек вы можете не только помочь пользователям понять, где они находятся на вашем веб-сайте, но и повысить вовлеченность пользователей. Хлебные крошки можно использовать для отображения прогресса пользователя в выполнении задачи, такой как процесс регистрации или покупка. Показывая прогресс пользователя, вы можете побудить его выполнить задачу.

Есть также много других вещей, которые вы должны учитывать при разработке веб-сайта, таких как удобство использования, доступность и удобство для мобильных устройств. Однако, если вы помните об этих вещах, вы можете создать веб-сайт, который будет одновременно удобным и привлекательным.