Thanks fo this, made my life easier for a breadcrumb navigation for a product I am wor

Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

Support for nested routes about react-router-breadcrumbs-hoc HOT 3 CLOSED

icd2k3 commented on June 19, 2024

Support for nested routes

from react-router-breadcrumbs-hoc.

Comments (3)

icd2k3 commented on June 19, 2024 1

This is now supported as of v2.0.1

from react-router-breadcrumbs-hoc.

icd2k3 commented on June 19, 2024

Hey @janhartmann, thanks for the report!

You're correct. Nested routes are not currently supported, but they should be. I've added a note to the readme to highlight this issue.

I should be able to add this soon! In the meantime, as a workaround, I'd suggest (not ideal, I know) maintaining 2 route configs like:

const reactRouterConfig = [
  {
    path: '/',
    component: () => <Redirect to='/projects' />,
    exact: true,
    breadcrumb: '',
  },
  {
    path: '/projects',
    component: ProjectListPage,
    breadcrumb: 'My Projects',
    exact: true,
  },
  {
    path: '/projects/:projectId',
    component: ProjectContainer,
    breadcrumb: ({ match }) => match.params.projectId,
    routes: [
        {
          path: '/projects/:projectId/discussions',
          component: DiscussionsPage,
        },
        {
          path: '/projects/:projectId/applications',
          component: ApplicationsPage,
        },
        {
        path: '/projects/:projectId/collaborators',
        component: CollaboratorsPage,
      },
    ],
  },
];

const breadcrumbsConfig = [
  {
    path: '/projects/:projectId/discussions',
    breadcrumb: 'Discussions',
  },
  {
    path: '/projects/:projectId/applications',
    breadcrumb: 'Applications',
  },
  {
    path: '/projects/:projectId/collaborators',
    breadcrumb: 'Collaborators',
  },
];

withBreadcrumbs(reactRouterConfig.concat(breadcrumbsConfig))(Component);