UniversalRouter Breadcrumbs

HTML

<script src="https://npmcdn.com/[email protected]/universal-router.js"></script>

JavaScript

const routes = {
  path: '/teams/:teamId',
  title: 'Team',
  children: [
    {
      path: '/projects/:projectId',
      title: 'Project',
      children: [
        {
          path: '/panel1',
          title: 'Panel',
          page: 'Panel Page',
        },
      ],
    },
  ],
};

const options = {
  resolveRoute(context) {
    return context.route.page ? context : null;
  }
};

const router = new UniversalRouter(routes, options);

router.resolve('/teams/1/projects/1/panel1').then(context => {
  console.log(context);
  const breadcrumbs = [];
  let route = context.route;
  console.log("route", route)
  while (route) {
    breadcrumbs.push(route.title);
    console.log(breadcrumbs)
    route = route.parent;
  }

  document.body.innerHTML =
    `<h1>${context.route.title}</h1>` +
    `<p>Breadcrumbs: ${breadcrumbs.reverse().join(' → ')}</p>` +
    `<p>Content: ${context.route.page}</p>`;
  // => <h1>Panel</h1>
  // => <p>Breadcrumbs: Team → Project → Panel</p>
  // => <p>Content: Panel Page</p>
});