React JS / Material UI - Панировочные сухари с динамическими идентификаторами между путями

Question

Я новичок в реакции и пытаюсь создать панировочные сухари с динамическими идентификаторами между путями.

Мои реквизиты для компонента:

const breadcrumbsData = {
  path: "facilities/65743/facilitycontact",
  breadcrumbNameMap: {
    "/facilities": "Facility",
    "/facilities/:facilityId": ":facilityId",
    "/facilities/:facilityId/facilitycontact": "Facility Contact"        
  }
};

Код, который отображает панировочные сухари:

<Breadcrumbs arial-label="Breadcrumb">
  {paths.map((path, index) => {
    const url = "/" + paths.slice(0, index + 1).join("/");
    const last = index === paths.length - 1;
    return last ? (
      <Typography color="inherit"> {breadcrumbNameMap[url]} </Typography>
    ) : (
      <Link to={url}>{breadcrumbNameMap[url]}</Link>
    );
  })}
</Breadcrumbs>

Я пробовал разные подходы, но не мог понять, как это сделать.Он прекрасно работает без идентификаторов между путями.например

const breadcrumbsData = {
  path: "facilities/facilityprofile/facilitycontact/workcontact",
  breadcrumbNameMap: {
    "/facilities": "Facility",
    "/facilities/facilityprofile": "Facility Profile",
    "/facilities/facilityprofile/facilitycontact": "Facility Contact"
  }
};

P: S - Попробовал 'match', но никуда не делся, и мой вариант использования - я вручную передаю путь из реквизита.

Вот полный код

Код Песочница - Хлебные крошки с использованием интерфейса и материала UI

Answer 1

Я не совсем уверен, зачем вам это нужно, но вот специальное решение. Не используйте ваш breadcrumbsData.breadcrumbNameMap напрямую, чтобы найти имя. Предварительно обработайте его и создайте карту с простой заменой строки.

Например, определите утилиту для предварительной обработки карты:

generateNameMap = (id, idKey, map) => { 
  // takes the actual id i.e. '65743', 
  // the template key that need to be replaced with i.e. ':facilityId'
  // and the initial map i.e. breadcrumbsData.breadcrumbNameMap
  const clone = {};
  Object.keys(map).forEach(k => {
    clone[k.replace(idKey, id)] = map[k].replace(idKey, id) // replace the template in both key and value with actual id
  })
  return clone;
}

Теперь определите ваш breadcrumbNameMap, чтобы использовать эту утилиту вместо непосредственного использования breadcrumbsData.breadcrumbNameMap:

const breadcrumbNameMap = this.generateNameMap(paths[1], ':facilityId', breadcrumbsData.breadcrumbNameMap);

Вот демоверсия:

const generateNameMap = (id, idKey, map) => {
    const clone = {};
    Object.keys(map).forEach(k => {
      clone[k.replace(idKey, id)] = map[k].replace(idKey, id)
    })
    return clone;
}


const breadcrumbNameMap = generateNameMap('65743', ':facilityId', {
        "/facilities": "Facility",
        "/facilities/:facilityId": ":facilityId",
        "/facilities/:facilityId/workcontact": "Facility Contact",
        "/facilities/facilityprofile/facilitycontact/": "Work Contact"
});
console.log(breadcrumbNameMap);