Как сформировать хлебные крошки?

Question

[Mirrrta]

const routes = [
  {
    title: 'Новости',
    url: '/news',
  },
  {
    title: '',
    url: '/news/:id',
  },
  {
    title: 'Комментарии',
    url: '/news/:id/comments',
  },
  {
    title: 'Пользователи',
    url: '/users',
  },
  {
    title: '',
    url: '/users/:userId',
  },
];

const location = useLocation();

В location.pathname получаю текущий url. Нужно сформировать массив, если в location.pathname будет, к примеру, "/news/1234/comments", то массив должен получиться такого вида:

[
 {
    title: 'Новости',
    url: '/news',
  },
  {
    title: '',
    url: '/news/1234',
  },
  {
    title: 'Комментарии',
    url: '/news/1234/comments',
  },
]

Comments

[Андрей]

Я делаю хардкод: разбиваю URL по '/', затем просто циклом прохожу и пушу нужные "крошки".

Есть еще более простой вариант - if (url.includes('news')) breadcrumbs.push({ title: 'Новости', url: '/news' }).

Наверняка есть методы поинтереснее.

Answer 1

[0xD34F]

pathname
  .split(/(?<=.)(?=\/)/)
  .map((n, i, a) => a.slice(0, i + 1).join(''))
  .map(n => ({
    title: routes.find(r => RegExp(`^${r.url.replace(/:[^\/]+/g, '[^\/]+')}$`).test(n))?.title ?? '',
    url: n,
  }))