React JS. NavLink activeClassName ICON, IMAGE

Question

I have this

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

So when active link is /shopping-cart I want to change cartIcon to another image, how I can ?

Answer 1

If by active link you mean url location, maybe try this quick fix:

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

where otherIcon is shown if user navigated to www.url.com/shooping-cart . You should be careful for some edge cases like www.url.com/shooping-cart/ (notice the extra '/' at the end), which will default to cartIcon .