反应JS。 NavLink activeClassName 图标、图像

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>

因此，当活动链接是 /shopping-cart 时，我想将 cartIcon 更改为另一个图像，我该怎么做？

Answer 1

如果活动链接是指网址位置，请尝试以下快速修复：

 <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>

如果用户导航到www.url.com/shooping-cart ，则显示otherIcon位置。 你应该小心一些边缘情况，比如www.url.com/shooping-cart/ （注意末尾的额外 '/'），它们将默认为cartIcon 。