React-Bootstrap link item in a navitem
2020 upd: tested with react-boostrap: 1.0.0-beta.16
and react-router-dom: 5.1.2
2019 upd: for those who are working with react-bootstrap v4 (using 1.0.0-beta.5 currently) and react-router-dom v4 (4.3.1) just use "as" prop from Nav.Link, here is full example:
import { Link, NavLink } from 'react-router-dom'
import { Navbar, Nav } from 'react-bootstrap'
<Navbar>
{/* "Link" in brand component since just redirect is needed */}
<Navbar.Brand as={Link} to='/'>Brand link</Navbar.Brand>
<Nav>
{/* "NavLink" here since "active" class styling is needed */}
<Nav.Link as={NavLink} to='/' exact>Home</Nav.Link>
<Nav.Link as={NavLink} to='/another'>Another</Nav.Link>
<Nav.Link as={NavLink} to='/onemore'>One More</Nav.Link>
</Nav>
</Navbar>
Here is working example: https://codesandbox.io/s/3qm35w97kq
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.