アクティブなスタイルのリアクタ・ルータ<NavLink>がルート・URLで必要なように機能しません

Question

メイン・メニューでこのNavLinksを使用しました。問題は、'/テスト/車'リンクをクリックしたとき'/ Test'のリンクもスタイルを適用しています。 私はそれが'/ Test'が他のリンクのルートであると考えているからだと思います。それは理にかなっています。

しかし、私は'/ Test'もアクティブなスタイルを適用するときに他のリンクのように動作するようにします。したがって'/ Test'は、'Home'リンクがクリックされたときにのみスタイルが適用されます。 どうすればいいのですか？

ちょうどあなたのパスの使用などの

<Route exact path="/TEST" component={Home}></Route> 
<Route path="/TEST/car" component={Car}></Route> 
<Route path="/TEST/van" component={Van}></Route> 
<Route path="/TEST/train" component={Train}></Route> 

<NavLink activeStyle={{borderBottom: 'solid 3px #fff', paddingBottom: '1em'}} to="/TEST" onClick={this.closeMenuForMobile.bind(this)} >Home</NavLink> 
<NavLink activeStyle={{borderBottom: 'solid 3px #fff', paddingBottom: '1em'}} to="/TEST/car" onClick={this.closeMenuForMobile.bind(this)} >Car</NavLink> 
<NavLink activeStyle={{borderBottom: 'solid 3px #fff', paddingBottom: '1em'}} to="/TEST/van" onClick={this.closeMenuForMobile.bind(this)} >Van</NavLink> 
<NavLink activeStyle={{borderBottom: 'solid 3px #fff', paddingBottom: '1em'}} to="/TEST/train" onClick={this.closeMenuForMobile.bind(this)}>Train</NavLink> 

Answer 1

exact

変更この

<NavLink activeStyle={{borderBottom: 'solid 3px #fff', paddingBottom: '1em'}} to="/TEST" onClick={this.closeMenuForMobile.bind(this)} >Home</NavLink> 

この

<NavLink activeStyle={{borderBottom: 'solid 3px #fff', paddingBottom: '1em'}} exact to="/TEST" onClick={this.closeMenuForMobile.bind(this)} >Home</NavLink> 

ソースに： https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md#exact-bool