React-Bootstrap link item in a navitem

Question

I'm having some styling issues using react-router and react-bootstrap. below is a snippet of the code

import { Route, RouteHandler, Link } from 'react-router'; import AuthService from '../services/AuthService' import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';      <Nav pullRight>       <NavItem eventKey={1}>         <Link to="home">Home</Link>       </NavItem>       <NavItem eventKey={2}>         <Link to="book">Book Inv</Link>       </NavItem>       <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">         <MenuItem eventKey="3.1">           <a href="" onClick={this.logout}>Logout</a>         </MenuItem>                 </NavDropdown>       </Nav> 

This is what it looks like when it renders.

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

Answer 1

Using LinkContainer from react-router-bootstrap is the way to go. The following code should work.

import { Route, RouteHandler, Link } from 'react-router'; import AuthService from '../services/AuthService' import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap'; import { LinkContainer } from 'react-router-bootstrap';  /// In the render() method <Nav pullRight>   <LinkContainer to="/home">     <NavItem eventKey={1}>Home</NavItem>   </LinkContainer>   <LinkContainer to="/book">     <NavItem eventKey={2}>Book Inv</NavItem>   </LinkContainer>   <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">     <LinkContainer to="/logout">       <MenuItem eventKey={3.1}>Logout</MenuItem>         </LinkContainer>         </NavDropdown>   </Nav> 

This is mostly a note to future self, when googling this issue. I hope someone else might benefit from the answer.