React Router V4 Implement NavLink inside a ListItem using Material UI

Question

I am new to React and I created a simple application with Login and Dashboard page. I have successfully configured my Public Routes

Answer 1

You can do it by setting the NavLink as the component of the list item. Here is an example that has worked for me!

<ListItem
  button
  key="Dashboard"
  component={NavLink} to="/dashboard"
>
    <ListItemIcon>
        <Dashboard />
    </ListItemIcon>
    <ListItemText primary="Dashboard" />
</ListItem>

Hope it helps!

Answer 2

Use the component prop of ListItem. To get active route styling, set activeClassName of NavLink to Mui-selected.

<ListItem button component={NavLink} to="/" activeClassName="Mui-selected" exact>
  ...
</ListItem>

Answer 3

You can attach a class to NavLink with something like:

<NavLink to="/" className="nav-link-item">
  Dashboard
</NavLink>

Then, attach styling to this class as:

.nav-link-item {
  color: inherit;
  text-decoration: none;
}

.nav-link-item:hover,
.nav-link-item:active,
.nav-link-item:visited {
  color: red;
  text-decoration: none;
}

/* Styling for when the link is active */
.nav-link-item.active {
  color: green;
}