Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CBreadcrumbRouter and CSidebarNav not supporting route parameters

See original GitHub issue

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?

Issue Analytics

State:
Created 3 years ago
Comments:16

Top GitHub Comments

3reactions

de1matcommented, Jun 21, 2020

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…

The last item “Website” is in bold and is linked. i.e. it is not being detected as “active” ❌
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.

1reaction

de1matcommented, Jun 23, 2020

@woothu thank you! Version 3.0.4 is working perfectly 👍

Top Results From Across the Web

React route, use the same component with different props ...

I'd define a single "components" route path that takes the data as a route parameter and accessed in the Component1 . Routes -...

How to Format the Datetime In Coreui Datatable React - ADocLib

Use React Router to route to pages based on URL: index.js : import ReactDOM from ... CBreadcrumbRouter and CSidebarNav not supporting route parameters...

Upload 'WANHEDA' Front End implementation files (0ac651ce)

import { HashRouter, Route, Switch } from "react-router-dom";. import "./scss/style.scss";. import { ToastContainer } from "react-toastify";.

React Router in Depth #7 - Route Parameters - YouTube

Watch the whole course now (without ads) on Net Ninja Pro:https://netninja.dev/p/react-router-in-depth ‍ Access the course files on ...

Full React Tutorial #25 - Route Parameters - YouTube

Hey gang, in this React tutorial we'll talk about route parameters & how we can use them to create a blog details page...