LinkContainer is setting active class twice and active class not getting removed on brand link click

[jainvizz]

I am using react bootstrap with react-router to implement nav bar functionality. Below I am providing the code for the same.

Routes

<Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/categoryType" component={CategoryType}/>
          <Route exact path="/category" component={Category}/>
          <Redirect from='*' to='/' />
        </Switch>

Nav Links

<Navbar bg="dark" expand="lg" variant="dark">
        <Navbar.Brand><Link className="navbar-brand" to="/">Project Blog</Link></Navbar.Brand>
        <Navbar.Toggle aria-controls="navbarCollapse" />
        <Navbar.Collapse id="navbarCollapse">
          <Nav className="mr-auto">
            <Nav.Item><IndexLinkContainer to={"/"}><Nav.Link>Home</Nav.Link></IndexLinkContainer></Nav.Item>
            <Nav.Item><LinkContainer to={"/categoryType"}><Nav.Link>Category Type</Nav.Link></LinkContainer></Nav.Item>
            <Nav.Item><LinkContainer to={"/category"}><Nav.Link>Category</Nav.Link></LinkContainer></Nav.Item>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

Everything is working but I am getting one weird issue, when I select a menu item it is getting selected but when I click on brand link it is selecting Home page which is correct but not de-selecting already selected menu.

I created the code sandbox for the same.

https://codesandbox.io/s/l4978989m9

Can any one please help me out with this.

Thanks,
Rahul

[nickboucart]

I'm seeing the same behaviour, any progress on this?

[jainvizz]

@nickboucart No I am still not able to find any solution for this.

[manonthemoon42]

Facing the exact same problem. Unfortunate that the class active doesn't get removed automatically.

[jainvizz]

For the time being I switched back to NavLink (react-router-dom)

<Navbar bg="dark" expand="lg" variant="dark">
        <Navbar.Brand><Link className="navbar-brand" to="/">Project Blog</Link></Navbar.Brand>
        <Navbar.Toggle aria-controls="navbarCollapse" />
        <Navbar.Collapse id="navbarCollapse">
          <Nav className="mr-auto">
            <Nav.Item><NavLink className="nav-link" exact to={"/"}>Home</NavLink></Nav.Item>
            <Nav.Item><NavLink className="nav-link" exact to={"/categoryType"}>Category Type</NavLink></Nav.Item>
            <Nav.Item><NavLink className="nav-link" exact to={"/category"}>Category</NavLink></Nav.Item>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

May be it can help someone.

[thejohnfreeman]

Note: @jainvizz's solution works only when the NavLink is rendered on every route change.

[v12]

Closing this one as a duplicate of #242.