Why it is not clear how a MenuItem makes navigation to other route?
for example, when clicks on a menu item, I want to route to '/account'
I can manage to achieve that using onclick function, but I am sure that there is an easier way. Pleas tell me about it I want to implement it on my project.
By the way, when used the containerElement containerElement={<Link to="/dashboard" />} I get the following error:
index.js:2177 Warning: React does not recognize the `containerElement` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `containerelement` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in li (created by ButtonBase)
in ButtonBase (created by withStyles(ButtonBase))
in withStyles(ButtonBase) (created by ListItem)
in ListItem (created by withStyles(ListItem))
in withStyles(ListItem) (created by MenuItem)
in MenuItem (created by withStyles(MenuItem))
in withStyles(MenuItem) (at MenuAppBar.js:116)
in ul (created by List)
in List (created by withStyles(List))
in withStyles(List) (created by MenuList)
in MenuList (created by Menu)
in div (created by Paper)
in Paper (created by withStyles(Paper))
in withStyles(Paper) (created by Popover)
in Transition (created by CSSTransition)
in CSSTransition (created by Grow)
in Grow (created by withTheme(Grow))
in withTheme(Grow) (created by Popover)
in div (created by Modal)
in Portal (created by Modal)
in Modal (created by withStyles(Modal))
in withStyles(Modal) (created by Popover)
in Popover (created by withStyles(Popover))
in withStyles(Popover) (created by Menu)
in Menu (created by withStyles(Menu))
in withStyles(Menu) (at MenuAppBar.js:101)
in div (at MenuAppBar.js:92)
in div (created by Toolbar)
in Toolbar (created by withStyles(Toolbar))
in withStyles(Toolbar) (at MenuAppBar.js:77)
in header (created by Paper)
in Paper (created by withStyles(Paper))
in withStyles(Paper) (created by AppBar)
in AppBar (created by withStyles(AppBar))
in withStyles(AppBar) (at MenuAppBar.js:76)
in div (at MenuAppBar.js:62)
in MenuAppBar (created by Connect(MenuAppBar))
in Connect(MenuAppBar) (created by withStyles(Connect(MenuAppBar)))
in withStyles(Connect(MenuAppBar)) (at Test.js:9)
in div (at Test.js:7)
in Test (created by Route)
in Route (at App.js:37)
in Switch (at App.js:34)
in div (at App.js:32)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:31)
in div (at App.js:30)
in App (created by Connect(App))
in Connect(App) (at index.js:34)
in MuiThemeProvider (created by MuiThemeProviderWrapper)
in MuiThemeProviderWrapper (at index.js:33)
in Provider (at index.js:32)
When I fixed that error by containerElement -> containerelement the error has disappeared, that is a good news, but the bad news is that the menu doesn't go for the mentioned rote in the Link!
MenuAppBar.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import AccountCircle from 'material-ui-icons/AccountCircle';
import Switch from 'material-ui/Switch';
import { FormControlLabel, FormGroup } from 'material-ui/Form';
import Menu, { MenuItem } from 'material-ui/Menu';
import Button from 'material-ui/Button';
import { connect } from 'react-redux';
import {Link } from 'react-router-dom'
const styles = {
root: {
width: '100%',
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
class MenuAppBar extends Component {
state = {
auth: true,
anchorEl: null,
};
handleChange = (event, checked) => {
this.setState({ auth: checked });
};
handleMenu = event => {
this.setState({ anchorEl: event.currentTarget });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
render() {
// console.log(this.props.auth)
// if(!this.props.auth)
// return <div> Loading... </div>;
const { classes } = this.props;
const { auth, anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
<div className={classes.root}>
{/* the log switch */}
{/* <FormGroup>
<FormControlLabel
control={
<Switch checked={auth} onChange={this.handleChange} aria-label="LoginSwitch" />
}
label={auth ? 'Logout' : 'Login'}
/>
</FormGroup>*/}
<AppBar position="static">
<Toolbar>
{/*
<IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
<MenuIcon />
</IconButton> */}
<Typography type="title" color="inherit" className={classes.flex}>
المواعيد
</Typography>
{/*If logged in */}
{this.props.auth && (
<div>
<IconButton
aria-owns="menu-appbar-logged"
aria-haspopup="true"
onClick={this.handleMenu}
color="contrast"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar-logged"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={open}
onClose={this.handleClose}
>
{/*Changing font for this text is on the them and there search for subheading*/}
<MenuItem onClick={this.handleClose} containerelement={<Link to="/dashboard" />}>الملف الشخصي</MenuItem>
<MenuItem onClick={this.handleClose} href="/api/logout">تسجيل الخروج</MenuItem>
</Menu>
</div>
)}
{/*end*/}
{/*If logged out */}
{!this.props.auth && (
<div>
<Button color="contrast" href="/auth/google/">تسجيل الدخول</Button>
</div>
)}
{/*end*/}
</Toolbar>
</AppBar>
</div>
);
}
}
MenuAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
function mapStateToProps({auth}){
return {auth}
}
export default withStyles(styles)(connect(mapStateToProps)(MenuAppBar));
Updae
I found another problem caused by the proposed solution below by Mr. @Gavin Thomas that refers to the post on SO. The problem is that using is just putting the mentioned 'to' attribute value in the URL linked to the existing route without going to that path, i.e
<MenuItem onTouchTap={() => {this.handleClose()}}><NavLink to="/api/logout">Sign Out</NavLink></MenuItem>
ends up having the link on the browser as http://localhost:3000/logout, without going there on the logout route at the nodejs backend server! that is a problem.
Note that I use proxy to directs from 3000 to 5000 as follows
"proxy": {
"/api/*": {
"target": "http://localhost:5000"
}
},
Generally speaking, I guess that is because the difference between and !
So please help me solve this 2nd problem!
Heres what we found out...
You now need to use < NavLink > vs Link
React material-ui MenuItem containerElement not working
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import Drawer from 'material-ui/Drawer'
<Drawer
docked={false}
open={this.state.open}
onRequestChange={(open) => this.setState({open})}>
<MenuItem onTouchTap={() => {this.handleClose()}} >
<NavLink to="/">Home </NavLink>
</MenuItem>
<MenuItem onTouchTap={() => {this.handleClose() }} >
<NavLink to="/about"> About Us </NavLink>
</MenuItem>
</Drawer>
You should use the component property. It is okay to use the Link component from react-router-dom:
<MenuItem component={Link} to="/logout">
Logout
</MenuItem>
The containerElement attribute was used in v0.x and no longer exists as of v1.
Please refer to the docs for MenuItem
来源：https://stackoverflow.com/questions/47873566/how-navigate-using-the-menuitem-material-ui-v1