MenuItem stays active when going back to the homepage

[Clafouti]

Hi,

I'm using a react-bootstrap Navbar like this:

      <Navbar fluid={true}>
        <Navbar.Header>
          <Navbar.Brand>
            <NavLink exact to={`/`}>Homepage</NavLink>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav>
            <NavDropdown eventKey={1} title={<span><i className="fa fa-flask"></i>&nbsp; {analysis.name}</span>} id="basic-nav-dropdown">
              <LinkContainer exact to={"/analysis/" + id}>
                <MenuItem eventKey={1.1}>Url Configuration</MenuItem>
              </LinkContainer>
              <LinkContainer exact to={"/analysis/" + id + "/data"}>
                <MenuItem eventKey={1.2}>Input Visualization</MenuItem>
              </LinkContainer>
            </NavDropdown>
          </Nav> 
          <Nav pullRight>
            <NavDropdown eventKey={2} title={<span><i className="fa fa-user-circle"></i>&nbsp; {username}</span>} id="basic-nav-dropdown">
              <MenuItem eventKey={2.1} onClick={this.logoutUser}>Logout</MenuItem>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

And my react-router configuration is this one:

index.js:

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route exact path="/login" component={Login}></Route>
        <PrivateRoute component={App}></PrivateRoute>
      </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

App Component:

class App extends Component {
  render() {
    return (
      <div>
        <Navigation/>
          <Grid fluid={true}>
            <Switch>
              <PrivateRoute exact path="/analysis/:analysisId" component={Analysis}></PrivateRoute>
              <PrivateRoute exact path="/analysis/:analysisId/data" component={AnalysisData}></PrivateRoute>
              <PrivateRoute exact path='/' component={AnalysisMain}></PrivateRoute>
              <PrivateRoute component={ErrorPath}></PrivateRoute>
            </Switch>
          </Grid>
        <Footer/>
      </div>
    );
  }
}

The active link of the DropDown menu works fine when I'm switch between the two PrivateRoute '/analysis/:analysisId' and '/analysis/:analysisId/data' but when I switch back to the homepage, the last MenuItem active stays that way.

I'm pretty sure I'm doing something wrong but even after browsing the related issues, I don't know where to look.

[v12]

Check your <Navigation /> component and see if it's being re-rendered. Quite often this is caused by react-redux preventing component from being updated.

[v12]

@Clafouti could you please update us if you've resolved it?

[Clafouti]

@v12 It was indeed react-redux preventing my nav component from being re-rendered. Thanks for your help.
If anyone face the same issue, I used the { pure : false } option with react-redux connect function. Here's a topic about it: remix-run/react-router#3536

I hope that this solution is still the recommended way to "force" a component to re-render.