По-хорошему компонент breadcrumbs должен получать массив элементов вида:
const breadCrumbsItems = [
{
title: 'Home',
path: '/',
},
{
title: 'Products',
path: '/products',
},
{
title: 'Iphone 6s Black',
},
];
и строить хлебыные крошки. Это все. Никаких деталей реализации вашего приложения этот компонент знать не должен. И уж тем более не должен инициировать никаких AJAX запросов.
Весь интерфейс:
<BreadCrumbs items={breadCrumbsItems} />
c отрисовкой массива элементов с помощью map:
<Wrapper>
{items.map((item, i) => (
<BreadCrumbsItem
key={item.path}
active={i === items.length - 1}
path={item.path}
>
{item.title}
</BreadCrumbsItem>
)}
</Wrapper>
или:
<BreadCrumbs>
<BreadCrumbs.Item path="/">Home</BreadCrumbs.Item>
<BreadCrumbs.Item path="/products">Products</BreadCrumbs.Item>
<BreadCrumbs.Item active>Iphone 6S Black</BreadCrumbs.Item>
</BreadCrumbs>
