icd2k3/react-router-breadcrumbs-hoc

Path matching

Closed this issue · 3 comments

ikovic commented

I've ran into a case when path matching didn't follow react-router - I've got a few routes set up as this:

.../reports
.../reports/:id
.../reports/create

When accessing ...reports/create, router displays the correct page, but the breadcrumb gets a wrong match - breadcrumb returned from HOC matches the .../reports/:id path, with create as id value.

I've patched the problem by changing from .../reports/:id to .../reports/details/:id.

Thanks for the awesome library, this is the first issue I've had with it. I'll be glad to provide more info if necessary.

icd2k3 commented

Thanks for reporting @ikovic - I hope to look into this sometime within the next week.

In the meantime you could try using the matchOptions param, or changing the order of the routes to see if that helps. The matchOptions param has the same options listed here: https://reacttraining.com/react-router/web/api/matchPath

  • 👍1
icd2k3 commented

Hey @ikovic after some testing, changing the order of the routes in your route config should work. The package returns the first match it finds in the list, so /create matches with /:id first (think of it like a switch statement). Changing your config to something like this should work:

[
  { path: '/reports', breadcrumb: 'reports' },
  { path: '/reports/create', breadcrumb: 'create'},
  { path: '/reports/:id', breadcrumb: 'id' },
]

I've also edited the readme to reflect this here

icd2k3 commented

Closing this issue, but please let me know if there's still an issue and I'll re-open it!

  • 👍1