反應路由器<NavLink>與活動樣式不工作，因爲我需要與根URL

Question

我在主菜單中使用此NavLinks。問題是當'/ Test/car'鏈接被點擊'/ Test'鏈接也應用樣式。 我相信這是因爲'/ Test'假設是其他鏈接的根。所以它是有道理的。

但我希望'/ Test'鏈接在應用活動樣式時也可像其他鏈接一樣工作。因此，'/ Test'將僅在單擊'主頁'鏈接時應用樣式。 我如何完成（以reactjs的方式）？

<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