React Router v4 setting activeClass on parent

Question

Not too familiar with react router, but I need the functionality of the NavLink to set the active class on the parent li element, and not the a ele

Answer 1

In v4 after lots of tries I did.

Here my working code.

import React, { Component } from "react";
import logo from "../../logo.svg";
import { Link, withRouter } from "react-router-dom";
import PropTypes from "prop-types";

class Navbar extends Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  state = {};

  getNavLinkClass = path => {
    return this.props.location.pathname === path
      ? "nav-item active"
      : "nav-item";
  };
  render() {
    return (
      

        
          
          Utility
        
        
          
        
        

          

            

              
                Home
              
            
            

              
                Age Counter
              
            
          
        
      
    );
  }
}

export default withRouter(Navbar);

Demo working Code Sandbox