Navitem中的React-Bootstrap链接项

我有一些使用react-router和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>是造成这个，但我不知道为什么？ 我想这是在线。

Answer 1

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

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

这是因为当NavItem呈现一个锚（ NavItem直接孩子）已经在那里。

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

Answer 2

使用来自react-router-bootstrap的LinkContainer是最好的select。 下面的代码应该工作。

 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> 

当使用Googlesearch这个问题时，这主要是对未来自我的一个提示。 我希望别人可以从答案中获益。

Answer 3

以下是与react-router 4一起使用的解决scheme：

 import * as React from 'react'; import { MenuItem as OriginalMenuItem, NavItem as OriginalNavItem } from 'react-bootstrap'; export const MenuItem = ({ href, ...props }, { router }) => ( <OriginalMenuItem onClick={e => {e.preventDefault();router.transitionTo(href)}} href={href} {...props}/> ); MenuItem.contextTypes = { router: React.PropTypes.any }; export const NavItem = ({ href, ...props }, { router }) => ( <OriginalNavItem onClick={e => {e.preventDefault();router.transitionTo(href)}} href={href} {...props}/> ); NavItem.contextTypes = { router: React.PropTypes.any }; 

Answer 4

您可以使用历史logging ，只要确保使用路由器创build组件：

在App.js中：

 // other imports import {withRouter} from 'react-router'; const NavigationWithRouter = withRouter(Navigation); //in render() <NavigationWithRouter /> 

在Navigation.js中：

 //same code as you used before, just make an onClick event for the NavItems instead of using Link <Nav pullRight> <NavItem eventKey={1} onClick={ e => this.props.history.push("/home") } > Home </NavItem> <NavItem eventKey={2} onClick={ e => this.props.history.push("/book") } > Book Inv </NavItem> </Nav> 

Answer 5

如果您希望NavItem内部基于当前select突出显示哪一个是活动的，则IndexLinkContainer是比LinkContainer更好的选项。 不需要手动select处理程序

 import { IndexLinkContainer } from 'react-router-bootstrap'; .... //Inside render <Nav bsStyle="tabs" > <IndexLinkContainer to={`${this.props.match.url}`}> <NavItem >Tab 1</NavItem> </IndexLinkContainer> <IndexLinkContainer to={`${this.props.match.url}/tab-2`}> <NavItem >Tab 2</NavItem> </IndexLinkContainer> <IndexLinkContainer to={`${this.props.match.url}/tab-3`}> <NavItem >Tab 3</NavItem> </IndexLinkContainer> </Nav>