Реагируйте JS. NavLink activeClassName ICON, ИЗОБРАЖЕНИЕ

Question

У меня есть это

 <div className="menu-item G-flex G-align-center">
     <img src={cartIcon} alt="Shopping cart" />
        <NavLink
            onClick={this.closeBar}
            to="/cart"
            activeClassName="active-page"
        >
           Shopping Cart
       </NavLink>
  </div>

Так что, когда активная ссылка / корзина покупок, я хочу изменить cartIcon на другое изображение, как я могу?

Answer 1

Если под активной ссылкой вы подразумеваете местоположение URL, возможно попробуйте это быстрое исправление:

 <div className="menu-item G-flex G-align-center">
 <img src={window.location.href.split('/').reverse()[0] === 'shopping-cart' ? otherIcon : cartIcon} alt="Shopping cart" />
    <NavLink
        onClick={this.closeBar}
        to="/cart"
        activeClassName="active-page"
    >
       Shopping Cart
   </NavLink>

, где отображается otherIcon, если пользователь перешел на www.url.com/shooping-cart. Вы должны быть осторожны с некоторыми крайними случаями, такими как www.url.com/shooping-cart/ (обратите внимание на дополнительный '/' в конце), который по умолчанию будет cartIcon.