IT技术 - 具有活动样式的 React 路由器 <NavLink> 无法按照我对根 URL 的要求工作 - 吾爱随笔录

我在主菜单中使用了这个 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>