когда я использую react-bootstrap для панели навигации, я столкнулся с проблемой в NavItem и MenuItem

import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { logout } from '../actions/authActions';
import { Navbar, NavItem, NavDropdown, MenuItem, Nav } from 'react-bootstrap';

class NavigationBar extends React.Component {
  logout(e) {
    e.preventDefault();
    this.props.logout();
  }

  render() {
    const { isAuthenticated } = this.props.auth;
    const userLinks = (
        <div>
            <Nav>
                <NavDropdown eventKey={1} title="Brokerage" id="basic-nav-dropdown">
                    <MenuItem conn/>
                    <MenuItem eventKey={1.1}><Link to="/brokerageList">Brokerage List</Link></MenuItem>
                    <MenuItem eventKey={1.2}><Link to="/addBrokerage">Add Brokerage</Link></MenuItem>
                    <MenuItem eventKey={1.3}><Link to="/report">Report</Link></MenuItem>
                    <MenuItem eventKey={1.3}><Link to="/websiteRequests">Website Requests</Link></MenuItem>
                </NavDropdown>

                <NavDropdown eventKey={2} title="Brokerage Settings" id="basic-nav-dropdown">
                    <MenuItem eventKey={2.1}><Link to="/membershipsAccess">Memberships Access</Link></MenuItem>
                    <MenuItem eventKey={2.2}><Link to="/crmMaintainence">CRM Maintainence</Link></MenuItem>
                    <MenuItem eventKey={2.3}><Link to="/helpSupport">Help & Support</Link></MenuItem>
                    <MenuItem eventKey={2.4}><Link to="/brokerageSettings">Brokerage CAP Settings</Link></MenuItem>
                    <MenuItem eventKey={2.5}><Link to="/websiteVideo">Website video</Link></MenuItem>
                </NavDropdown>

                <NavItem eventKey={3} ><Link to="/profile">Profile</Link></NavItem>
            </Nav>

            <Nav pullRight>
                <NavItem eventKey={4}><a onClick={this.logout.bind(this)}>Logout</a></NavItem>
            </Nav>
        </div>
      );

    const guestLinks = (
        <Nav pullRight>
            <NavItem eventKey={5} ><Link to="/login">Login</Link></NavItem>
        </Nav>
    );

    return(
        <Navbar inverse collapseOnSelect>
            <Navbar.Header>
                <Navbar.Brand>
                    <Link to="/">Home</Link>
                </Navbar.Brand>
                <Navbar.Toggle />
            </Navbar.Header>

            <Navbar.Collapse>
                { isAuthenticated ? userLinks : guestLinks }
            </Navbar.Collapse>
        </Navbar>
    );
  }
}

NavigationBar.propTypes = {
  auth: React.PropTypes.object.isRequired,
  logout: React.PropTypes.func.isRequired
}

function mapStateToProps(state) {
  return {
    auth: state.auth
  };
}

export default connect(mapStateToProps, { logout })(NavigationBar);

Это мой сценарий навигации, когда я загружаю эту панель навигации, я столкнулся с некоторой ошибкой.

** ошибка 1 - (до входа в систему)

Предупреждение: validateDOMNesting(...): не может отображаться как потомок . См. NavigationBar > NavItem > SafeAnchor > a > ... > Link > a.**

** ошибка 2 - (после входа в систему)

bundle.js:1333 Предупреждение: неизвестная опора conn в теге. Удалите эту опору из элемента. Дополнительные сведения см. в разделе Предупреждение: validateDOMNesting(...): не может отображаться как потомок . См. NavigationBar > MenuItem > SafeAnchor > a > ... > Link > a. Предупреждение: validateDOMNesting(...): не может отображаться как потомок . См. NavigationBar > NavItem > SafeAnchor > a > ... > a.**