当网址具有参数时,无法应用React Nav Link activeStyle

时间:2018-11-16 16:25:10

标签: reactjs react-router

我有一个NavLink标头。用户首先登录,然后该URL将用户电子邮件作为URL参数。

问题是由于我认为NavLink to网址不匹配,因此未应用activeStyle。或者我没有使用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>

1 个答案:

答案 0 :(得分:0)

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

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