I’m using react-router v7 for my app and have encountered an issue where the page header (Breadcrumb, Title, and actions) persists from the initially loaded page even when navigating to different routes. Instead of updating to reflect the current page, the header remains stuck displaying the content from the first page that was loaded.
Do you have any code to share, a screencast, and/or a codepen example of this? That would be very helpful in understanding exactly what’s going on.
I think this happens if you don’t set the header in the new page, it keeps the old one.
@Anthony_Frehner Please note this was working fine when we first migrated to web components. But in the last 2/4 days this issue was reported by many of our clients.
Could be an issue with how the React code get re-rendered. I think it’s better to share a piece of code, so others can reproduce the error and help you.
Turned out the header component was failing silently when “icon” or/and “variant” prop is set for slot “secondary-actions”.
Removing the icon and the variant fixed the issue.
@Anthony_Frehner Since icon is supported prop on the the header should not fail, at least not silently. am I missing something?
I believe the extensibility team is looking into this. Thanks!