具有主动样式的 React 路由器 <NavLink> 无法按照我对 root URL 的要求工作

Question

我在主菜单中使用了这个 NavLinks。问题是当 '/Test/car' link 被点击时 '/Test' link 也是应用样式。我相信这是因为 '/Test' 应该是其他 link 的根。所以这是有道理的。

但我希望 '/Test' link 在应用活动样式时也能像其他 link 一样工作。因此 '/Test' 将仅在单击 'Home' link 时应用样式。我是如何完成的（以 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

具有主动样式的 React 路由器 <NavLink> 无法按照我对 root URL 的要求工作

React router <NavLink> with active style doesn't work as I required with root URL

reactjs

react-router-v4