NavLink ListItems not Applying activeClassName class when Clicked On – ReactJS React-Router MaterialUI

Hi everyone,

A bit of a hairy issue I ran into today that took a while to track down. I’m using React Router with Material UI to render a Drawer as a sidebar:

The issue was that some links were not applying the expected activeclass:

<ListItem button component={NavLink} to="/about" onClick={this.handleItemClick} className={classes.sidebarContentListItem} activeClassName={}>
	<ListItemIcon className={classes.sidebarText}>
		<Info />
	<ListItemText primary={
		<Typography type="body2" className={classes.sidebarText}>
	} />

After trawling through react-router I eventually found a post on github that mentioned a similar issue:

The solution turned out to be wrapping all relevant components with withrouter.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.