Как выводить breadcrumbs в react?

Question

[Mirrrta]

Как выводить breadcrumbs в react?

Answer 1

[yurii_oliiarnyk]

1. Вам нужно с строки location.pathname вытянуть значение. Допустим /menu11
2. Дальше создать рекурсивную функцию, которая будет возращать масив с обєктами предков.
Могу примерно код сделать.
3. Ну а потом уже просто мапить етот масив.

Comments

[yurii_oliiarnyk]

const categories = [
  {
    name: 'Новости',
    categories: [
      {
        name: 'Главные Новости',
        url: '/news',
      },
    ],
  },
  {
    name: 'Меню',
    categories: [
      {
        name: 'Меню 1',
        url: '/menu1',
        categories: [
          {
            name: 'Меню 11',
            url: '/menu11',
          },
        ],
      },
      {
        name: 'Меню 2',
        url: '/menu2',
      },
      {
        name: 'Меню 3',
        url: '/menu3',
      },
    ],
  },
];

const findParents = (url, items = categories) => {
    let i = 0;
  
    do {
      const item = items[i];
      const isFindedUrl = url === item.url;
      
      if (isFindedUrl) {
        return [item];
      }
      
      if (item.categories) {
        const childs = findParents(url, item.categories);
        
        if (childs) {
          return [item, ...childs];
        }
      }
      
      i++;
    } while (items.length !== i)
             
    return;
};

const currentUrl = '/menu11';

console.log(findParents(currentUrl));