react-router – 在navitem中的React-Bootstrap链接项

我使用反应路由器和反应引导有一些造型问题。下面是代码片段

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>

这是渲染时的外观。

我知道< Link>< / Link>是造成这个，但我不知道为什么？我想这样做是在线的。

你不应该把锚放在NavItem里面。通过这样做，您将在控制台中看到警告：

警告：validateDOMNesting(…)：< a>不能显示为< a>的后裔。参见标题> NavItem> SafeAnchor> a> …>链接>一个。

这是因为当NavItem渲染时，锚(NavItem的直接子代)已经存在。

由于上述的警告，反应将被迫把这两个锚点当作兄弟姐妹，这样造成了风格问题。