为什么不清楚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错误消失了，这是一个好消息，但坏消息是菜单不符合链接中提到的死记硬背！

菜单应用栏.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));

更新

我发现了另一个由@Gavin Thomas 先生在下面提出的解决方案引起的问题，该解决方案引用了 SO 上的帖子。问题是 using 只是将提到的“to”属性值放在链接到现有路由的 URL 中，而不去该路径，即

<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"
    }
  },

一般来说，我猜是因为 和 之间的区别！

所以请帮我解决第二个问题！