Remove Active Class from LinkContainer - reactjs

Question

In my react app I have buttons for logging in and out. Logging out isn't a big deal because it's never made active. When using LinkContainer (which is great) it will add an active class of active when that route is selected. This is great for everything except buttons. When it adds the `active class to my button it adds a padded background color behind the button. I don't want that. Heres the code and image now:
And here's the code:
import { Glyphicon, Nav, NavItem, Button } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
<Nav>
<LinkContainer to={'/'} exact>
<NavItem>
<Glyphicon glyph='home' /> Home
</NavItem>
</LinkContainer>
<LinkContainer to={'/documents'}>
<NavItem>
<Glyphicon glyph='education' /> User Documents
</NavItem>
</LinkContainer>
<LinkContainer to={'/login'}>
<NavItem>
<Button bsStyle="primary" block>
<span className='glyphicon glyphicon-log-in'></span>Login
</Button>
</NavItem>
</LinkContainer>
</Nav>
I want it to set that active class on everything other than my buttons.
Using react-bootstrap and react-router-bootstrap

Answer 1

After looking through the code on react-router-bootstrap and a bunch of different articles and posts I figured it out.
I had to change:
<LinkContainer to={'/login'}>
<NavItem>
<Button bsStyle="primary" block>
<span className='glyphicon glyphicon-log-in'></span>Login
</Button>
</NavItem>
</LinkContainer>
To:
<LinkContainer to={'/login'} activeClassName="">
<NavItem>
<Button bsStyle="primary" block>
<span className='glyphicon glyphicon-log-in'></span>Login
</Button>
</NavItem>
</LinkContainer>
Making the activeClassName="" worked as it would make sure there was no active class being set.
Extremely helpful for buttons. I hope this saves people time. Here's what it looked like after for comparison: