反应路由器<NavLink>使用活动样式无法按照我对根 URL 的要求工作 [英] React router <NavLink> with active style doesn't work as I required with root URL

问题描述

我在主菜单中使用了这个 NavLinks.问题是，当点击 '/Test/car' 链接时，'/Test' 链接也会应用样式.我相信这是因为 '/Test' 假设是其他链接的根.所以这是有道理的.

I used this NavLinks in the main menu. The issue is that when '/Test/car' link is clicked '/Test' link is also applying the styles. I believe it's because '/Test' suppose to be the root of other links. so it make sense.

但我希望 '/Test' 链接在应用活动样式时也能像其他链接一样工作.所以 '/Test' 只有在点击 'Home' 链接时才会应用样式.我是如何完成的(以 reactjs 的方式)?

But I want '/Test' link also to work like other links when applying the active style. So '/Test' will get applied the styles only when that 'Home' link is clicked. How I get that done (in a reactjs way)?

<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>

推荐答案

就像你的路径一样使用 exact

Just like your path use 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

这篇关于反应路由器<NavLink>使用活动样式无法按照我对根 URL 的要求工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！