title: React Router - NavLink activeStyle or activeClassName not working for nested routes
body: <p>I'm using <code>react-router-dom</code>. In my code, <code>NavLink</code> fails to apply <code>activeStyle</code> or <code>activeClassName</code> not even on page load/reload. I've nested routes but not using redux.</p>
  
  <p><strong>Sample Code:</strong> <a href="https://stackblitz.com/edit/react-1q4gem?file=Hello.js" rel="nofollow noreferrer"><strong>Stackblitz</strong></a></p>
  
  <p><em>react-router-dom version: 4.3.1</em></p>
  
  <p><strong>index.js</strong>:</p>
  
  <pre><code>  render() {
      return (
        &lt;div&gt;
          &lt;Router&gt;
            &lt;Hello&gt;
              &lt;Route path="/child-a" component={ChildA} /&gt;
              &lt;Route path="/child-b" component={ChildB} /&gt;
            &lt;/Hello&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p><strong>hello.js:</strong></p>
  
  <pre><code>  render() {
      return (
        &lt;div&gt;
          &lt;h5&gt;
            &lt;NavLink
              to="child-a"
              activeStyle={{ color:'red' }}
              exact
            &gt;child-a&lt;/NavLink&gt;
          &lt;/h5&gt;
          &lt;h5&gt;
            &lt;NavLink
              to="child-b"
              activeStyle={{ color:'red' }}
              exact
            &gt;child-b&lt;/NavLink&gt;
          &lt;/h5&gt;
          &lt;div&gt;
            &lt;div&gt;&lt;h2&gt;Hello&lt;/h2&gt;&lt;/div&gt;
            {this.props.children}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>