react-bootstrap: NavDropdown triggers change of page

I am using DropdownButton with navItem prop but it always triggered change of page. The same still happens with NavDropdown. Is there anyway to have a dropdown menu where clicking the dropdown just drops the menu and doesn’t change the page?

    <NavDropdown
                            title={userName}
                            NavDropdown={true}
                            navItem={true}>
                            <MenuItem
                                href='/user/account'>
                                View/Edit Account Details
                            </MenuItem>
    </NavDropdown>

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

I tried many things to find a problem, but couldn’t do it without dirty hack removing href attribute from the actual rendered element.

componentDidMount () {
    this.removeHref()
}

componentDidUpdate () {
    this.removeHref()
}

removeHref () {
    const dropdownLink = findDOMNode(this.refs.dropdown).querySelector(".dropdown-toggle")
    dropdownLink.removeAttribute("href")
}

My code is as basic as this:

<NavDropdown id="top-menu-user" title={ "Username" }>
    <MenuItem href="someurl">{ "Settings" }</MenuItem>
    <MenuItem divider />
    <MenuItem href="someurl">{ "Logout" }</MenuItem>
</NavDropdown>

I debugged my code and nothing is injecting onClick handler. The component NavDropdown (the <a> tag contains empty href property) when clicked always refreshes page.

LKay on Feb 2, 2016