为什么不清楚MenuItem如何导航到其他路线？
例如，当点击菜单项时，我想路由到'/ account'
我可以设法使用onclick功能实现这一点，但我确信有一种更简单的方法。请告诉我，我想在我的项目中实现它。
顺便说一句，当使用containerElement containerElement={<Link to="/dashboard" />}时，我收到以下错误：
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)
当我通过containerElement修改该错误 - > containerelement时，错误消失了，这是一个好消息，但坏消息是该菜单不适用于链接中提到的死记硬背！
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));
Upde
我发现由@Gavin Thomas先生提出的解决方案引起的另一个问题是指SO上的帖子。问题是使用只是将链接到现有路由的URL中提到的'to'属性值放在那里而不去那条路径，即
<MenuItem onTouchTap={() => {this.handleClose()}}><NavLink to="/api/logout">Sign Out</NavLink></MenuItem>
最终在浏览器上有http://localhost：3000 / logout的链接，而不是在nodejs后端服务器的注销路径上去！这是一个问题。
请注意，我使用代理从3000到5000指向如下
"proxy": {
"/api/*": {
"target": "http://localhost:5000"
}
},
一般来说，我猜是因为和之间的区别！
所以请帮我解决第二个问题！
继承人我们发现了......
您现在需要使用<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>
你应该使用component财产。可以使用react-router-dom中的Link组件：
<MenuItem component={Link} to="/logout">
Logout
</MenuItem>
containerElement属性在v0.x中使用，在v1中不再存在。
请参阅MenuItem的文档