How to change Icon on Navlink when active?

user_15651616 0
Viewed 2249

I'm making a tab bar for phone in react js and i have icons on it. I'm using React Router to perform the routes. Right now im able to change the icon color when it is active using an .active class. Is there a way I can change the Icon File when the route is active? Here is the code attached below.

import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';
import home_icon_stroke from './home_icon_stroke.svg';
import explore_icon_stroke from './explore_icon_stroke.svg';
import activity_icon_stroke from './activity_icon_stroke.svg';
import library_icon_stroke from './library_icon_stroke.svg';
import profile_icon_stroke from './profile_icon_stroke.svg';
import './Phonetabbar.css';


export default class Phonetabbar extends Component {
    render() {
        return (
            <div className="phone-tabbar-layout" >
                <div className="fixed" >
                    <div className="phone-tabbar-list"> 
                            <div  className="tabbar-cell">
                                <NavLink exact to="/" >
                                    <img src={home_icon_stroke} ></img>
                                </NavLink>
                             </div>    
                            
                           
                            <div className="tabbar-cell">
                                <NavLink to="/explore" >
                                    <img src={activity_icon_stroke} ></img>
                                </NavLink>
                            </div>    
                    </div>
                </div> 
            </div>
        )
    }
}

react-router-dom react-router reactjs
1 Answers

Maybe you want to try passing the isActive function to Navlink, setting a state in it.

<NavLink exact to="/" 
  isActive={(match, location)=>{
     if(match){
       //set isActive state true
     }
     return match;
  } 
>
  <img src={isActive?home_icon_stroke:anotherImg} ></img>
</NavLink>
user_81934670
Related