Search code examples
react-routerreact-bootstrap

React-Bootstrap link item in a navitem

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.

enter image description here

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

Solution

  • You should not put anchor inside NavItem. By doing this you will see warning in the console:

    Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See Header > NavItem > SafeAnchor > a > ... > Link > a.

    That's because when NavItem is rendered an anchor (direct child of the NavItem) is already there.

    Because of the warning above, react will be forced to treat the two anchor as sibling, which caused the style issue.