title: React router NavLink activeClassName does not work with redux and styled components
body: <p>I had a project built with react redux sagas and styled components. I tried to create navigation menu with NavLink and expected to style active link item with a different color as below:</p>
  
  <pre><code>const MenuLink = styled(NavLink)`
      color: #fff;
  
      &amp;.active {
         color: ${appColor}; 
      }
  `;
  
  export class Menu extends React.Component {
      static propTypes = {
          user: PropTypes.object.isRequired,
      };
  
  render() {
    const { user } = this.props;
    return (
    &lt;MenuWrapper&gt;
      &lt;Box textAlign="center" borderRight="#fff 1px solid"&gt;
        &lt;MenuLink to="" activeClassName="active" exact={true}&gt;
          Trang Chủ
        &lt;/MenuLink&gt;
      &lt;/Box&gt;
      {user.isAuthenticated &amp;&amp; (
        &lt;Box textAlign="center" borderRight="#fff 1px solid"&gt;
          &lt;MenuLink to="/team" activeClassName="active" exact={true}&gt;
            Đội Hình
          &lt;/MenuLink&gt;
        &lt;/Box&gt;
      )}
      {user.isAuthenticated &amp;&amp; (
        &lt;Box textAlign="center" borderRight="#fff 1px solid"&gt;
          &lt;MenuLink to="/points" activeClassName="active" exact={true}&gt;
            Điểm Số
          &lt;/MenuLink&gt;
        &lt;/Box&gt;
      )}
  </code></pre>
  
  <p>The Routes are defined as follows:</p>
  
  <pre><code>&lt;Router history={history}&gt;
      &lt;ThemeProvider theme={theme}&gt;
        &lt;AppWrapper logged={user.isAuthenticated}&gt;
          &lt;Helmet
            defer={false}
            htmlAttributes={{ lang: 'pt-br' }}
            encodeSpecialCharacters={true}
            defaultTitle={config.title}
            titleTemplate={`%s | ${config.name}`}
            titleAttributes={{ itemprop: 'name', lang: 'pt-br' }}
          /&gt;
          &lt;Header dispatch={dispatch} user={user} /&gt;
          &lt;Main isAuthenticated={user.isAuthenticated}&gt;
            &lt;Switch&gt;
              &lt;Route path="/" exact component={Home} /&gt;
              &lt;RoutePrivate
                isAuthenticated={user.isAuthenticated}
                path="/team"
                component={Team}
              /&gt;
              &lt;RoutePrivate
                isAuthenticated={user.isAuthenticated}
                path="/points"
                component={Points}
              /&gt;
              &lt;RoutePrivate
                isAuthenticated={user.isAuthenticated}
                path="/private"
                component={Home}
              /&gt;
              &lt;Route path="/home" exact component={Home} /&gt;
              &lt;Route path="/register" exact component={Signup} /&gt;
              &lt;Route path="/login" exact component={Signin} /&gt;
              &lt;Route path="/schedule" exact component={Schedule} /&gt;
              &lt;Route path="/rules" exact component={Rules} /&gt;
              &lt;Route path="/rank" exact component={Rank} /&gt;
              &lt;Route path="/stats" exact component={Stats} /&gt;
              &lt;Route path="/about" exact component={About} /&gt;
              &lt;Route component={NotFound} /&gt;
            &lt;/Switch&gt;
          &lt;/Main&gt;
          &lt;Footer /&gt;
          &lt;SystemAlerts /&gt;
          &lt;GlobalStyles /&gt;
        &lt;/AppWrapper&gt;
      &lt;/ThemeProvider&gt;
    &lt;/Router&gt;
  </code></pre>
  
  <p>The problem is when a menu item is clicked, the active class is not added; therefore, the style is not applied. Does anyone have any idea what could be the problem and how to fix this? Thanks. </p>