title: React Router V4 Implement NavLink inside a ListItem using Material UI
body: <p>I am new to React and I created a simple application with <strong>Login</strong> and <strong>Dashboard</strong> page. I have successfully configured my <strong>Public Routes</strong> and <strong>Private Routes</strong> with <strong>Redirect</strong> functionalities. However when I want to implement <a href="https://material-ui.com/" rel="noreferrer">material-ui/core</a> Things are still quite working well but I can't achieve the <strong>UI</strong> that I want.</p>
  
  <p>Here is my old implementation of my <strong>NavBar</strong> below:</p>
  
  <pre><code>const Navigation = () =&gt; {
      return (
          &lt;div&gt;
              &lt;NavLink exact to="/" activeStyle={{ color: 'red' }}&gt;Home&lt;/NavLink&gt;
              &lt;NavLink to="/about" activeStyle={{ color: 'red' }}&gt;About&lt;/NavLink&gt;
              &lt;NavLink to="/contact" activeStyle={{ color: 'red' }}&gt;Contact&lt;/NavLink&gt;
          &lt;/div&gt;
      )
  }
  
  export default Navigation
  </code></pre>
  
  <p>As simple as that with no <strong>styling</strong> or <strong>classes</strong></p>
  
  <p>But since I want to add some <strong>styles</strong> I used <strong>material/ui core</strong> and ended up doing the new one below:</p>
  
  <pre><code>export const MainNavigation = (
    &lt;div&gt;
      &lt;ListItem button&gt;
        &lt;ListItemIcon&gt;
          &lt;DashboardIcon /&gt;
        &lt;/ListItemIcon&gt;
        &lt;ListItemText primary="Dashboard" /&gt;
      &lt;/ListItem&gt;
      &lt;ListItem button&gt;
        &lt;ListItemIcon&gt;
          &lt;ShoppingCartIcon /&gt;
        &lt;/ListItemIcon&gt;
        &lt;ListItemText primary="Orders" /&gt;
      &lt;/ListItem&gt;
      &lt;ListItem button&gt;
        &lt;ListItemIcon&gt;
          &lt;PeopleIcon /&gt;
        &lt;/ListItemIcon&gt;
        &lt;ListItemText primary="Customers" /&gt;
      &lt;/ListItem&gt;
      &lt;ListItem button&gt;
        &lt;ListItemIcon&gt;
          &lt;BarChartIcon /&gt;
        &lt;/ListItemIcon&gt;
        &lt;ListItemText primary="Reports" /&gt;
      &lt;/ListItem&gt;
      &lt;ListItem button&gt;
        &lt;ListItemIcon&gt;
          &lt;LayersIcon /&gt;
        &lt;/ListItemIcon&gt;
        &lt;ListItemText primary="Integrations" /&gt;
      &lt;/ListItem&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>Now the first <code>ListItem</code> looks like this below:</p>
  
  <p><a href="https://i.stack.imgur.com/m10AU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/m10AU.png" alt="enter image description here"></a></p>
  
  <p>But when I add this line of code below:</p>
  
  <pre><code>&lt;ListItemText primary={&lt;NavLink exact to="/"&gt;Dashboard&lt;/NavLink&gt;} /&gt;
  </code></pre>
  
  <p>This is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/5Z0nz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5Z0nz.png" alt="enter image description here"></a></p>
  
  <p>But I don't want this to happen.</p>
  
  <p>I want to keep the first <strong>UI</strong> I dont wan't it to make it look like an <strong>anchor tag</strong> with a <strong>under line below</strong> </p>
  
  <p>How can I also handle the <strong>active state</strong> of the <code>ListItem</code> in material/ui integrated with react router <code>NavLink</code> or <code>Link</code>? So that I can put some style or uses the active class of material.</p>
  
  <p>Appreciate if someone could help.
  Thanks in advance.</p>