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

Question

I have a simple page build in react with react-bootstrap and react-mini-router.

I am using the same code in the react-bootstrap example for navigation for dropdown:

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

});

When I build the page and open the index as you can see here, the dropdown in the menu works as expected and just drops the menu without navigating the page, whether you are in 'home' or 'about'.

However when I use gulp-connect or python SimpleHTTPServer to serve the page at localhost, pressing the dropdown always changes/navigates the page to 'home', even though the dropdown is not a link.

How can this happen?

The full code of example can be found here and problem can be replicated by running gulp which will start the web server.

Nima Nima · Accepted Answer · 2015-09-21T10:22:23

Update: the problem was a conflict between react-bootstrap and react-mini-router, you can see progress/solution at this Github issue.

My temporary fix was to capture the event at RouterMixin's handleClick function.

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

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

1 Answers