带有 react-bootstrap 的下拉列表在构建静态文件中有效，但在与 Web 服务器一起提供时无效

Question

我用 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>
            )
    }

});

当我构建页面并打开索引时，如您所见 here，菜单中的下拉菜单按预期工作，只是放下菜单而不导航页面，无论您是否在 'home' 或 'about'。

然而，当我使用 gulp-connect 或 python SimpleHTTPServer 在本地主机上提供页面时，总是按下拉菜单 changes/navigates 页面到 'home'，即使下拉菜单不是 link.

怎么会这样？

示例的完整代码可以在 here 中找到，问题可以通过运行 gulp 复制，这将启动 Web 服务器。

Answer 1

更新：问题是 react-bootstrap 和 react-mini-router 之间的冲突，你可以在 this Github issue 看到 progress/solution。

我的临时修复是在 RouterMixin 的 handleClick 函数中捕获事件。

handleClick: function(evt) {
    var dropdownevt = (evt.path[0].id === 'acc-dropdown');
        if (url && self.matchRoute(url.pathname) && !dropdownevt) {    ...

带有 react-bootstrap 的下拉列表在构建静态文件中有效，但在与 Web 服务器一起提供时无效

Dropdown with react-bootstrap works in build static file but not when served with web server

javascript

reactjs

react-bootstrap