Style-Link auf aktive Route basierend in React Router v4

Question

Ich habe ein Navlink Element wie folgt:

<NavLink isActive={this.isActiveFunc.bind(this)} className={classes.subLink} to={{ pathname: "/admin/users" }}> 
     <ListItem button className={classes.nested}> 
      <ListItemText inset primary="Users" /> 
     </ListItem> 
    </NavLink> 

Wenn diese Verbindung aktiv ist möchte ich die ListItemText anders gestylt werden. Dazu habe ich versucht, die folgende Logik anwenden

isActiveFunc = (match, location) => { 
    this.setState({activePath: match.path}); 
    return match 
    }; 

wonach ich den Stil festlegen kann, wenn der activePath Zustand entspricht den to Pfad. Dies führt jedoch zu einem Fehler:

TypeError: Cannot read property 'path' of null

Answer 1

Wie viel Kontrolle haben Sie über das Formatieren des ListItemText? Können Sie ihm eine Stütze oder Klassennamen übergeben, wenn er aktiv ist ?:

<NavLink className={classes.subLink} to={{ pathname: "/admin/users" }}> 
    <ListItem button className={classes.nested}> 
     <ListItemText inset primary="Users" passDownAClassName={props.match.path == "/admin/users" ? 'active-class' : 'inactive-class'} /> 
    </ListItem> 
</NavLink> 

Oder:

<NavLink className={classes.subLink} to={{ pathname: "/admin/users" }}> 
    <ListItem button className={classes.nested}> 
     <ListItemText inset primary="Users" isActive={props.match.path == "/admin/users"} /> 
    </ListItem> 
</NavLink>