我有一个与 react-bootstrap 和 react-mini-router 反应的简单页面。
我在 react-bootstrap 示例中使用相同的代码来导航下拉菜单:
render: function() {
var userName = 'Superman';
return (
<Navbar brand="React-Bootstrap">
<Nav>
<NavItem eventKey={1} href="/">Home</NavItem>
<NavItem eventKey={2} href="/About">About</NavItem>
<NavDropdown eventKey={3} title={userName} id="basic-nav-dropdown" onClick={this.userNameClick}>
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3">Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4">Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
)
}
});
当我构建页面并打开索引时,如您在此处看到的那样,菜单中的下拉菜单按预期工作,并且只是放下菜单而不导航页面,无论您是在“家”还是“关于”。
但是,当我使用 gulp-connect 或 python SimpleHTTPServer 在 localhost 提供页面时,按下下拉菜单总是会将页面更改/导航到“主页”,即使下拉菜单不是链接。
这怎么可能发生?
可以在此处找到示例的完整代码,并且可以通过运行 gulp 来复制问题,这将启动 Web 服务器。