Search code examples
reactjsreact-bootstrap

react-bootstrap NavBar not working as intended

I am fairly new to react and I have this issue with <NavDropdown.Item> in the following class:

import React, { Component } from 'react';
import { Nav, Navbar, NavItem, NavDropdown } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import './NavMenu.css';


export class NavMenu extends Component {
  displayName = NavMenu.name


  render() {
    return (
        <Navbar bg="primary" variant="dark" fluid fixedTop collapseOnSelect>
            <Navbar.Header>
                <Navbar.Brand>
                    Brand
                </Navbar.Brand>
                <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
                <Nav>
                    <LinkContainer to={'/'} exact>
                        <NavItem>
                            Home
                        </NavItem>
                    </LinkContainer>

                    <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
  }
}

Once I build my project the following error shows up:

enter image description here

Replacing <NavDropdown.Item> by <MenuItem> works but I am wondering what's the cause of such problem.

Solution

  • I believe you are using "react-bootstrap" 0.33.1 version. And "MenuItem" is used in this version so that it works for you, see here

    You could upgrade the version to v1.4.0 to use "NavDropdown.Item", see here