React Router V4 Implement NavLink inside a ListIte

Question

I am new to React and I created a simple application with Login and Dashboard page. I have successfully configured my Public Routes and Private Routes with Redirect functionalities. However when I want to implement material-ui/core Things are still quite working well but I can't achieve the UI that I want.

Here is my old implementation of my NavBar below:

const Navigation = () => {
    return (
        <div>
            <NavLink exact to="/" activeStyle={{ color: 'red' }}>Home</NavLink>
            <NavLink to="/about" activeStyle={{ color: 'red' }}>About</NavLink>
            <NavLink to="/contact" activeStyle={{ color: 'red' }}>Contact</NavLink>
        </div>
    )
}

export default Navigation

As simple as that with no styling or classes

But since I want to add some styles I used material/ui core and ended up doing the new one below:

export const MainNavigation = (
  <div>
    <ListItem button>
      <ListItemIcon>
        <DashboardIcon />
      </ListItemIcon>
      <ListItemText primary="Dashboard" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <ShoppingCartIcon />
      </ListItemIcon>
      <ListItemText primary="Orders" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <PeopleIcon />
      </ListItemIcon>
      <ListItemText primary="Customers" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <BarChartIcon />
      </ListItemIcon>
      <ListItemText primary="Reports" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <LayersIcon />
      </ListItemIcon>
      <ListItemText primary="Integrations" />
    </ListItem>
  </div>
);

Now the first ListItem looks like this below:

But when I add this line of code below:

<ListItemText primary={<NavLink exact to="/">Dashboard</NavLink>} />

This is the result:

But I don't want this to happen.

I want to keep the first UI I dont wan't it to make it look like an anchor tag with a under line below

How can I also handle the active state of the ListItem in material/ui integrated with react router NavLink or Link? So that I can put some style or uses the active class of material.

Appreciate if someone could help. Thanks in advance.

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

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;
}

Answer 3

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>