React Nav Link activeStyle не применяется, когда в URL есть параметр

Question

У меня есть заголовок NavLink.Сначала пользователь входит в систему, затем в качестве URL-адреса в качестве URL-адреса указывается адрес электронной почты пользователя.

Проблема в том, что activeStyle не применяется, поскольку я думаю, что URL-адрес NavLink to не совпадает.Или я не использую 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>