CBreadcrumbRouter and CSidebarNav not supporting route parameters

[de1mat]

I have the following example routes:

{ path: '/websites', name: 'Websites', component: Websites, exact: true },
{ path: '/websites/:websiteId', name: 'Website', component: EditWebsite, exact: true },

If I go to /websites then the breadcrumb shows "Home > Websites" which is correct. And the Sidebar correctly highlights "Websites" in the list.

If I go to /websites/12345 then the breadcrumb still shows "Home > Websites". It should show "Home > Websites > Website". And the Sidebar is no longer highlighting "Websites" even though I am in a subroute of /websites still.

Both these scenarios worked perfectly in CoreUI 2.0.

Is there something I need to change? Or do these newer components not support route parameters yet?

[wilburluce]

I hit this issue too. It was fixed in 2.0 coreui/coreui-free-react-admin-template#27 - somehow this has regressed

[wilburluce]

Using free version of template, npm list @coreui/react is 3.0.2 - here's commit that fixed the issue in v2.x 969bd9c @woothu are you able to take a look at this for us? thank you in advance, if not ill try to come up with a PR

[woothu]

Hi, thank you for this report!

• CBreadcrumbRouter will receive the fix in incoming version, (6d8b59b)
• CSidebarNavDropdown has 'route' prop which specifies the prefix for all the items that are inside dropdown, so it shouldn't rely on parameters

[woothu]

Fix released in 3.0.3 version

[de1mat]

Thanks for the fix I will try it tomorrow.

Regarding the Sidebar - I am not using nested Dropdowns. And I don't think the issue was quite understood. The issue is that it is no longer highlighting "Websites" even though I am in a subroute of /websites still. If I move into pages inside the /websites route, no mater how deep, the top level nav item should stay selected. It does not at the moment. Maybe you mean I need to tweak my SideNav code slightly to resolve this? I will check this tomorrow as well just in case I missed something.

[woothu]

It should stay open if you have set route prop in CSidebarNavDropdown to '/websites'

This behavior is working on the demo

[wilburluce]

I tried the fix in 3.0.3 and it didnt work for me. When navigating via a link to the route with an id, the breadcumb didnt present the :id as crumb name, it duplicated the previous name in list, so it was like Home > Model > Model vs the expected Home > Model > 123456 .. i havent had time to dig into futher.. but will spend more time soon. cc @woothu (looks like issue is closed so cc-ing you incase you dont get this message)

[woothu]

@wilburluce Breadcrumb shows route name, not a current parameter, it is intended behavior.

In this case, you can take the CBreadcrumbRouter code and customize it for your case.

[wilburluce]

@woothu - ok understood regarding the intended behavior. I do think i found a small bug on the fix in 3.0.3 - the current link is styled as clickable (blue).. when clicked it changes to grey and routes to /models/:id (:id as literal string)

[de1mat]

There are still issues in 3.0.3 for me.

Going back to the original bug report. I have the following routes:

{ path: '/websites', name: 'Websites', component: Websites, exact: true },
{ path: '/websites/:websiteId', name: 'Website', component: EditWebsite, exact: true },

The Breadcrumb Issues in 3.0.3

If I go to /websites then the breadcrumb shows "Home > Websites" which is correct, as shown below ✅

If I go to /websites/12345 then the breadcrumb now correctly shows "Home > Websites > Website" as shown below...

Notice the following issues...

1. The last item "Website" is in bold and is linked. i.e. it is not being detected as "active" ❌
2. The link for "Website" is showing as <a href="/websites/:websiteId">Website</a> ❌

The Sidebar Issue

So I do not use CSidebarNavDropdown. I just have the top-level "modules" linked to in the side menu as shown in the pic below.

If I go to /websites then the Sidebar correctly highlights "Websites" as shown in the above screenshot ✅

If I go to /websites/12345 then "Websites" is no longer selected, as shown in the screenshot below ❌ But I would expect this to remain selected, as it did in CoreUI v2.

Adding route to the CSidebarNavItem does not seem to make any difference and maybe is not supported for that component but should be.

[woothu]

Thank you for the report!

Regarding CBreacrumbRouter it was fixed again in 3.0.4 version (Now the real path is referenced instead of router route 7e2c87b)

CSidebarNavItem:
Unlike CLink it is set to exact=true by default, it prevents multiple sidebar items to be displayed as active simultaneously.
Set exact=false to disable this behavior.

[de1mat]

@woothu thank you! Version 3.0.4 is working perfectly 👍