当url具有参数时，未应用React Nav Link activeStyle

Question

我有一个NavLink标题。用户首先登录，然后url将用户电子邮件作为url参数。

问题是activeStyle没有被应用，因为我认为NavLinktourl不匹配。或者我没有正确使用activeStyle。如果我需要url参数，有没有办法让activeStyle与我的NavLinks一起使用？

<div>
<ul>
<li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/about" + email}>About</NavLink></li>
<li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper" + email}>Jasper</NavLink></li>
<li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/contact" + email}>Contact</NavLink></li>
<li><NavLink activeStyle={{borderBottom: '3px solid #46b4f0'}} className="Nav_link" to={"/jasper/search" + email}>Search</NavLink></li>
</ul>
</div>
<div>
<Route path="/jasper/about" component={About} />
<Route exact path="/jasper" component={Jasper} />
<Route path="/jasper/contact" component={Contact} />
<Route path="/jasper/search" component={Search} />
</div>

Answer 1

您可以添加isActive属性，并使用活动状态的逻辑将电子邮件包括在路径名的末尾

<NavLink
to="/events/123"
isActive={(location) => location.pathname === this.props.pathname + email}
>Event 123</NavLink>