title: How to Remove Active Background in React-Bootstrap
body: <p>How can I remove the active Nav Item background feature in react-bootstrap when selecting Nav Item? It acting abnormally when I use it with 'react-redux' and 'react-router-bootstrap'?</p>
  
  <p>For instance, when I reload the home page, the active background only stays on one of the Nav Items even if I select other Nav Items. Below is the image of the navitem (Dashboard) item is selected and the code for the navbar! Any recommendations would be greatly appreciate!</p>
  
  <p><a href="https://i.stack.imgur.com/tvivp.png" rel="nofollow"><img src="https://i.stack.imgur.com/tvivp.png" alt="Nav Bar"></a></p>
  
  <pre><code>import React, {Component, PropTypes} from 'react';
  import {connect} from 'react-redux';
  import {LinkContainer, IndexLinkContainer} from 'react-router-bootstrap';
  
  import {
    Nav,
    NavItem,
    Navbar
  } from 'react-bootstrap';
  
  class NavBar extends Component {
  
    render() {
      const {authenticated} = this.props;
      return (
        &lt;Navbar&gt;
          &lt;Navbar.Header&gt;
            &lt;Navbar.Brand&gt;
              &lt;a href="/"&gt;Timesheet App&lt;/a&gt;
            &lt;/Navbar.Brand&gt;
            &lt;Navbar.Toggle/&gt;
          &lt;/Navbar.Header&gt;
          &lt;Navbar.Collapse&gt;
            &lt;Nav&gt;
              &lt;IndexLinkContainer to="/"&gt;
                &lt;NavItem className="nav-link" eventKey={1}&gt;Dashboard&lt;/NavItem&gt;
              &lt;/IndexLinkContainer&gt;
              &lt;LinkContainer to="/timesheet/new"&gt;
                &lt;NavItem className="nav-link" eventKey={2}&gt;Submit Time&lt;/NavItem&gt;
              &lt;/LinkContainer&gt;
              &lt;LinkContainer to="/user/Andriy"&gt;
                &lt;NavItem className="nav-link" eventKey={3}&gt;Andriy Time&lt;/NavItem&gt;
              &lt;/LinkContainer&gt;
              {authenticated &amp;&amp;
                &lt;LinkContainer to="/signout"&gt;
                  &lt;NavItem className="nav-link" eventKey={4}&gt;Sign Out&lt;/NavItem&gt;
                &lt;/LinkContainer&gt;}
              {!authenticated &amp;&amp;
                &lt;LinkContainer to="/signin"&gt;
                  &lt;NavItem className="nav-link" eventKey={5}&gt;Sign In&lt;/NavItem&gt;
                &lt;/LinkContainer&gt;}
              {!authenticated &amp;&amp;
                &lt;LinkContainer to="/signup"&gt;
                  &lt;NavItem className="nav-link"&gt;Sign Up&lt;/NavItem&gt;
                &lt;/LinkContainer&gt;}
            &lt;/Nav&gt;
          &lt;/Navbar.Collapse&gt;
        &lt;/Navbar&gt;
      );
    }
  }
  
  NavBar.propTypes = {
    authenticated: PropTypes.bool
  };
  
  function mapStateToProps(state) {
    return {
      authenticated: state.auth.authenticated
    };
  }
  
  export default connect(mapStateToProps)(NavBar);
  </code></pre>