Мы рассмотрим, как создать динамический компонент хлебных крошек с помощью React Router. Хлебные крошки предоставляют пользователям набор ссылок, которые представляют их текущее местоположение в приложении. Мы рассмотрим каждый шаг кода, объясним его назначение и поможем вам реализовать эту функцию в ваших проектах React.
- Что такое панировочные сухари?
Представьте, что вы просматриваете интернет-магазин электроники. Вы начинаете с посещения домашней страницы, затем переходите в раздел «Продукты», затем в «Электроника» и, наконец, попадаете в категорию «Ноутбуки». На каждом этапе хлебные крошки действуют как руководство, показывая вам пройденный путь и позволяя при необходимости быстро вернуться к предыдущему разделу.
- Теперь давайте углубимся в код и его функциональность:
1) Импорт зависимостей:
Мы импортируем хук useLocation из библиотеки react-router-dom. Этот хук позволяет нам получить доступ к текущему объекту местоположения, содержащему информацию об URL-пути.
2) Получение текущего местоположения:
Внутри компонента мы вызываем хук useLocation, чтобы получить текущее местоположение. Он возвращает объект с информацией о текущем пути URL.
3) Разделение пути на сегменты:
Мы разбиваем имя пути на сегменты, используя метод разделения с символом «/» в качестве разделителя. Это создает массив сегментов пути. Например, для пути «/products/electronics/laptops» возвращаемый массив будет следующим: [‘’, ‘products’, ‘electronics’, ‘laptops’].
4) Создание URL-адреса хлебной крошки:
Мы инициализируем пустую строку url, в которой будет храниться добавочный путь, когда мы прокручиваем массив сегментов.
5) Сопоставление сегментов со ссылками хлебной крошки:
Используя метод карты, мы перебираем массив сегментов и строим каждую навигационную цепочку. Для каждого сегмента мы обновляем URL-адрес, добавляя текущий сегмент с помощью литералов шаблона.
6) Рендеринг ссылок хлебных крошек: внутри функции карты мы возвращаем элемент Link из react-router-dom (‹Link›) для каждого сегмента. Атрибут to создается путем объединения URL-адреса с базовым URL-адресом примера (https://example.com). Если сегмент представляет собой пустую строку, мы отображаем «Дом» в качестве текста ссылки; в противном случае мы используем сам сегмент.
7) Заключение:
Следуя этому объяснению кода, вы теперь хорошо понимаете, как создать динамический компонент навигационной цепочки с помощью React Router.
Хлебные крошки предоставляют пользователям ценный контекст, улучшая их навигацию по вашему приложению. Не стесняйтесь настраивать и расширять этот код в соответствии с конкретными требованиями вашего проекта.
⚠Примечание: я хотел бы, чтобы вы указали, что вы можете получить компонент хлебных крошек, используя компоненты пользовательского интерфейса, такие как Chakra, MUI или Ant Design. Но я хотел, чтобы вы знали логику, стоящую за этим, и теперь вы можете обращаться с этим, как хотите.
