score:4

Accepted answer

you can do something like this in your rendering function:

class yourcomponent extends react.component {
  render() {
    var isactive = this.context.router.route.location.pathname === this.props.to;

    return(
        <navlink
          to={route}
          exact
          activeclassname="selected"
        >
         <icon>{isactive && icon || othericon}</icon>
        </navlink>
    );
  }
}

navlink.contexttypes = {
    router: proptypes.object
};

this way you are actually checking if the route you are rendering is the active one and in case choose the correct icon

score:2

for a more independent component that will not need to be connected in a special way to context or redux. you could use withrouter, hoc element from react-router. after wrapping you have the match, location, history available for your component. so then you can check your route / to path string to the location object.

https://reacttraining.com/react-router/web/api/withrouter


Related Query

More Query from same tag