Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for nested routes #24

Closed
janhartmann opened this issue Mar 7, 2018 · 3 comments
Closed

Support for nested routes #24

janhartmann opened this issue Mar 7, 2018 · 3 comments

Comments

@janhartmann
Copy link

janhartmann commented Mar 7, 2018

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
Copy link
Owner

icd2k3 commented Mar 7, 2018

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
Copy link
Author

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

@icd2k3
Copy link
Owner

icd2k3 commented Mar 11, 2018

This is now supported as of v2.0.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants