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

Question

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

问题是没有应用 activeStyle，因为我认为 NavLink to url 不匹配。或者我没有正确使用 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>