How to hide Parent when child route is active

[Shubham-Sinha]

Hi,

I tried to implement React Router example. Here's the codesandbox link.

The links at top is the breadcrumb

The links to Bus and Cart at bottom is present on the parent route Tacos but is visible on child route Bus or Cart

[icd2k3]

Hi @Shubham-Fareye,

Just so I understand: do you expect...

1.) tacos to be removed from the breadcrumbs like this?
interesting use-case, but this is possible with this module. I can provide an example if needed

Or...

2.) that BusCart links shouldn't be there like this?
this issue can be solved by refactoring your route components in react-router

[icd2k3]

Closing this after 2 weeks of inactivity. Happy to re-open and help when the problem is clarified!

[pjvds]

@icd2k3 I would love to see an example of scenario one :)

[icd2k3]

@pjvds it's a bit verbose, but since location is passed to dynamic breadcrumbs, we can use that to determine wether or not to show "Tacos"

const routes = [
  {
    path: "/tacos",
    breadcrumb: ({ location: { pathname } }) =>
      pathname.toLowerCase() === "/tacos" ? "Tacos" : null
  },
];

Here's a codesandbox

[pjvds]

Thanks @icd2k3 for the fast and prompt answer ❤️