title: React router <NavLink> with active style doesn't work as I required with root URL
body: <p>I used this NavLinks in the main menu. The issue is that when <strong>'/Test/car'</strong> link is clicked <strong>'/Test'</strong> link is also applying the styles.
  I believe it's because <strong>'/Test'</strong> suppose to be the root of other links. so it make sense. </p>
  
  <p>But I want <strong>'/Test'</strong> link also to work like other links when applying the active style. So <strong>'/Test'</strong> will get applied the styles only when that <strong>'Home'</strong> link is clicked.
  How I get that done (in a reactjs way)?</p>
  
  <pre><code>&lt;Route exact path="/TEST" component={Home}&gt;&lt;/Route&gt;
  &lt;Route path="/TEST/car" component={Car}&gt;&lt;/Route&gt;
  &lt;Route path="/TEST/van" component={Van}&gt;&lt;/Route&gt;
  &lt;Route path="/TEST/train" component={Train}&gt;&lt;/Route&gt;
  
  &lt;NavLink activeStyle={{borderBottom: 'solid 3px #fff', paddingBottom: '1em'}} to="/TEST" onClick={this.closeMenuForMobile.bind(this)} &gt;Home&lt;/NavLink&gt;
  &lt;NavLink activeStyle={{borderBottom: 'solid 3px #fff', paddingBottom: '1em'}} to="/TEST/car" onClick={this.closeMenuForMobile.bind(this)} &gt;Car&lt;/NavLink&gt;
  &lt;NavLink activeStyle={{borderBottom: 'solid 3px #fff', paddingBottom: '1em'}} to="/TEST/van"  onClick={this.closeMenuForMobile.bind(this)} &gt;Van&lt;/NavLink&gt;
  &lt;NavLink activeStyle={{borderBottom: 'solid 3px #fff', paddingBottom: '1em'}} to="/TEST/train" onClick={this.closeMenuForMobile.bind(this)}&gt;Train&lt;/NavLink&gt;
  </code></pre>