Breadcrumbs и маршруты

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

import { Breadcrumb } from 'antd';

<Breadcrumb>
  <Breadcrumb.Item>Главная</Breadcrumb.Item>
  <Breadcrumb.Item>Каталог</Breadcrumb.Item>
  <Breadcrumb.Item>Электроника</Breadcrumb.Item>
</Breadcrumb>

В этом примере создаётся простая цепочка навигации. Каждый элемент Breadcrumb.Item может быть кликабельным. Для добавления ссылок используется свойство href или компонент Link из react-router-dom:

import { Link } from 'react-router-dom';

<Breadcrumb>
  <Breadcrumb.Item>
    <Link to="/">Главная</Link>
  </Breadcrumb.Item>
  <Breadcrumb.Item>
    <Link to="/catalog">Каталог</Link>
  </Breadcrumb.Item>
  <Breadcrumb.Item>Электроника</Breadcrumb.Item>
</Breadcrumb>

Динамическая генерация хлебных крошек

Для сложных приложений часто требуется строить Breadcrumb динамически на основе текущего маршрута. Для этого можно использовать массив объектов с title и path:

const routes = [
  { path: '/', title: 'Главная' },
  { path: '/catalog', title: 'Каталог' },
  { path: '/catalog/electronics', title: 'Электроника' },
];

<Breadcrumb>
  {routes.map(route => (
    <Breadcrumb.Item key={route.path}>
      <Link to={route.path}>{route.title}</Link>
    </Breadcrumb.Item>
  ))}
</Breadcrumb>

Такой подход позволяет легко изменять структуру навигации без изменения разметки.

Интеграция с React Router

Для интеграции Breadcrumb с react-router-dom применяется комбинация useLocation и matchPath. Это позволяет автоматически определять текущий маршрут и строить цепочку крошек:

import { useLocation, Link } from 'react-router-dom';

const routeMap = {
  '/': 'Главная',
  '/catalog': 'Каталог',
  '/catalog/electronics': 'Электроника',
};

const Breadcrumbs = () => {
  const location = useLocation();
  const pathSnippets = location.pathname.split('/').filter(i => i);
  const breadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>{routeMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });

  return (
    <Breadcrumb>
      <Breadcrumb.Item>
        <Link to="/">Главная</Link>
      </Breadcrumb.Item>
      {breadcrumbItems}
    </Breadcrumb>
  );
};

Данный метод гарантирует, что Breadcrumb всегда отражает текущую позицию в маршрутах приложения.

Пользовательские разделители

По умолчанию Ant Design использует символ / для разделителей элементов. Для замены можно использовать свойство separator:

<Breadcrumb separator=">">
  <Breadcrumb.Item>Главная</Breadcrumb.Item>
  <Breadcrumb.Item>Каталог</Breadcrumb.Item>
  <Breadcrumb.Item>Электроника</Breadcrumb.Item>
</Breadcrumb>

Можно также использовать JSX для более сложных иконок:

import { RightOutlined } from '@ant-design/icons';

<Breadcrumb separator={<RightOutlined />}>
  <Breadcrumb.Item>Главная</Breadcrumb.Item>
  <Breadcrumb.Item>Каталог</Breadcrumb.Item>
  <Breadcrumb.Item>Электроника</Breadcrumb.Item>
</Breadcrumb>

Поддержка вложенных меню

Ant Design позволяет создавать вложенные элементы с помощью Breadcrumb.Item и комбинирования с компонентами Dropdown и Menu. Это полезно, когда один уровень навигации имеет несколько подкатегорий:

import { Menu, Dropdown } from 'antd';

const menu = (
  <Menu>
    <Menu.Item key="1">
      <Link to="/catalog/electronics/phones">Телефоны</Link>
    </Menu.Item>
    <Menu.Item key="2">
      <Link to="/catalog/electronics/laptops">Ноутбуки</Link>
    </Menu.Item>
  </Menu>
);

<Breadcrumb>
  <Breadcrumb.Item>
    <Link to="/">Главная</Link>
  </Breadcrumb.Item>
  <Breadcrumb.Item>
    <Dropdown overlay={menu}>
      <span>Электроника</span>
    </Dropdown>
  </Breadcrumb.Item>
</Breadcrumb>

Такой подход улучшает пользовательский опыт, позволяя выбирать подкатегории прямо из крошек.

Хлебные крошки и SEO

Использование Breadcrumb повышает SEO-ценность страниц. Каждую крошку можно пометить с помощью микроразметки Schema.org, указывая itemListElement и position:

<Breadcrumb itemScope itemType="http://schema.org/BreadcrumbList">
  <Breadcrumb.Item itemProp="itemListElement" itemScope itemType="http://schema.org/ListItem" position={1}>
    <Link to="/" itemProp="item">
      <span itemProp="name">Главная</span>
    </Link>
  </Breadcrumb.Item>
</Breadcrumb>

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

Заключение по функционалу

Компонент Breadcrumb в Ant Design является мощным инструментом для построения навигации. Он поддерживает:

  • Статические и динамические цепочки
  • Интеграцию с React Router
  • Пользовательские разделители и иконки
  • Вложенные меню и подкатегории
  • SEO-оптимизацию через микроразметку

Его гибкость позволяет адаптировать крошки под любые требования сложных интерфейсов и поддерживать удобную навигацию для пользователей.

Оглавление