Breadcrumbs prop is never updated about react-router-breadcrumbs-hoc

[LostCrew]

Hi @icd2k3 ,
Thank you so much for taking care of testing. Answers:

• Sadly, at this moment, we're locked with 15 due to work needed to upgrade other libraries
• None, otherwise I would have reported them here
• Excellent assumption: I will verify that and get back to you soon

I have tried to use withRouter in combination with withBreadcrumb, in various order and with different configurations. I have even made the attempt to decorate it with redux connect, in hope that that would feed in new props from store upon location change, thus somehow driving the component to re-render. In the end, nothing worked.
Anyways, expect updates with results of my investigations.

[icd2k3]

Thanks for the report @LostCrew!

I tested this in my app and can't repro the issue. Even if there's no breadcrumb matches it still logs an empty array for breadcrumbs in componentWillReceiveProps for me.

Couple questions:

• Does upgrading to React 16.x.x help?
• Any errors or warnings in the console?
• Is it possible your Breadcrumbs component is being blocked from updating higher up the component chain?

You could also try wrapping the whole thing in withRouter from react-router to force updates every time the path changes (although this shouldn't be necessary).

For reference, here's what I tried on my end:

class PureBreadcrumbs extends Component {
  componentWillReceiveProps({ breadcrumbs }) {
    console.log(breadcrumbs);
  }

  render() {
    return <span>yo</span>;
  }
}

export default withBreadcrumbs([
  {
    path: 'test',
    breadcrumb: 'Test',
  },
])(PureBreadcrumbs);

^ the above logs [] to the console

My setup:

• [email protected] <----- only difference from your setup
• [email protected]
• [email protected]
• [email protected]

[icd2k3]

Thanks @LostCrew - I should have some time this upcoming weekend to run some more tests as well.

In the meantime - I'm wondering what your route config looks like? ... if you're using strings like:

{ path: '/users', breadcrumb: 'Users' }

String rendering is only supported in React 16. So if this is the case you may need to switch to something like:

{ path: '/users', breadcrumb: () => <span>Users</span> }

[LostCrew]

Hey @icd2k3, some routes have breadcrumb of type string, others are function/component. The ones with string render the string correctly once matched, so I would lean towards excluding React version to be the cause of the issue.
I still have to verify that my Breadcrumbs component updates aren't blocked. ;)

[icd2k3]

Closing due to inactivity - but if it's an issue on my end I'll reopen!

[LostCrew]

@icd2k3 Good like that, unfortunately we paused the upgrade of react router that involves switching to this new breadcrumbs component until further requirements are provided. Still, I wish someone else would encounter this and be up to move discussion forward.