React-Bootstrap link item in a navitem : <p>I'm having some styling issues using react-router and react-bootstrap.  below is a snippet of the code</p>

<pre><code>import { Route, RouteHandler, Link } from 'react-router';
import AuthService from '../services/AuthService'
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';

    &lt;Nav pullRight&gt;
      &lt;NavItem eventKey={1}&gt;
        &lt;Link to="home"&gt;Home&lt;/Link&gt;
      &lt;/NavItem&gt;
      &lt;NavItem eventKey={2}&gt;
        &lt;Link to="book"&gt;Book Inv&lt;/Link&gt;
      &lt;/NavItem&gt;
      &lt;NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown"&gt;
        &lt;MenuItem eventKey="3.1"&gt;
          &lt;a href="" onClick={this.logout}&gt;Logout&lt;/a&gt;
        &lt;/MenuItem&gt;          
      &lt;/NavDropdown&gt;  
    &lt;/Nav&gt;
</code></pre>

<p>This is what it looks like when it renders.</p>

<p><a href="https://i.stack.imgur.com/h6aUI.png"><img src="https://i.stack.imgur.com/h6aUI.png" alt="enter image description here"></a></p>

<p>I know that the <code>&lt;Link&gt;&lt;/Link&gt;</code> is causing this but I don't know why?  I would like for this to be in-line.</p>
