反应路由器 活动样式无法按我的要求使用根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