Support for nested routes

[janhartmann]

Thanks fo this, made my life easier for a breadcrumb navigation for a product I am working on! :-)

We have a routing structure like this:

export default [
  {
    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,
        breadcrumb: 'Discussions',
      },
      {
        path: '/projects/:projectId/applications',
        component: ApplicationsPage,
        breadcrumb: 'Applications',
      },
      {
        path: '/projects/:projectId/collaborators',
        component: CollaboratorsPage,
        breadcrumb: 'Collaborators',
      },
    ],
  },

And the HOC is working perfectly for the first level routes - the thing is that we have a nested routes: [...] which also contains breadcrumb, and they do not appear.

Could the HOC be recursively by adding which prop to traverse for breadcrumbs?

All the best,
Jan

[icd2k3]

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);

[janhartmann]

I can live with this for now! Thank you! ;-)

[icd2k3]

This is now supported as of v2.0.1