ReactJS NavLink activeClassName

Question

I want to rendered a NavLink with a active class when the route is the same that the current route. This is the code:

<NavLink className="nav-link-gdc" activeClassName="nav-link-gdc-selected" to="/home">HOME</NavLink>

The problem is that this only works when I reload the URL and I do not know how to trigger the change of the class when I click in the link.

EDIT:

My entry point:

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <HeaderControl />
        <MuiThemeProvider>
          <Switch>
            <Routes />
            <PrivateRoute path="/" component={Home} />
          </Switch>
        </MuiThemeProvider>
        <Footer />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app'),
);

All the links that I want to change the class when active are in the HeaderControl. How could I use the prop location?

Any ideas?

Answer 1

You could do something like:

<NavLink className="nav-link-gdc" activeClassName={location.pathname !== "your pathname"? null : "nav-link-gdc-selected"} to="/home">HOME</NavLink>

Or don't I get your problem?