NavItem Active State Faulty

[Thomas-Smyth]

Hello all,

It seems that the active states of NavItems are being incorrectly set when using react-router.

No need to supply my own code to show this as the issue is present in the example section of this repository.

When most pages are being accessed, it shows both the Home page and the currently selected page as active. For example, in this gallery page, both the Gallery page NavItem and the Home page NavItem are active.

To me, without analysing the repository code, it looks as if the system to show which NavItem is active checks the NavItem paths to see if they contain the current path. I do not believe this should be the case as it causes paths such as / and /blog to both be shown as active when only one should be active at a time. However, this should be the case for all sublinks / links in the dropdowns from the navbar.

[Greg-Hamel]

@Thomas-Smyth thanks for looking into this. It’s been on my list of things to look at for a while. I’ll have a look and report back soon.

[Thomas-Smyth]

Done some more experimenting, it seems that the active state is being passed correctly to the Nav.Link component, but it's children something goes wrong. That seems to do with React Router's exact prop not being present.

Edit:
As I suspected when adding exact to RootComponent in the NavLink component file it renders correctly.

  return RootComponent ? (
    <RootComponent exact className={classes} to={to}>
      {childrenForAll}
    </RootComponent>
  ) : (
    <a className={classes} href={to} ref={rootRef}>
      {childrenForAll}
    </a>
  );

Though this obviously isn't a good fix. I just don't understand React and React Router enough to fix it. I'm still a newbie when it comes to React.

[jonthomp]

🎉 This issue has been resolved in version 1.27.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀