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);
This is my navigation script when load that navigation bar i faced some error.
**error 1 - (before login)
Warning: validateDOMNesting(...): cannot appear as a descendant of . See NavigationBar > NavItem > SafeAnchor > a > ... > Link > a.**
**error 2 - (after login)
bundle.js:1333 Warning: Unknown prop
conn
on tag. Remove this prop from the element. For details, see Warning: validateDOMNesting(...): cannot appear as a descendant of . See NavigationBar > MenuItem > SafeAnchor > a > ... > Link > a. Warning: validateDOMNesting(...): cannot appear as a descendant of . See NavigationBar > NavItem > SafeAnchor > a > ... > a.**