reactjs - 如何使用 MenuItem 进行导航？ Material -ui V1

Question

为什么不清楚怎么个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));

更新

我发现了另一个由 @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"
    }
  },

一般来说，我想这是因为 和 之间的区别!

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

Answer 1

您应该使用component 属性。可以使用react-router-dom中的Link组件:

<MenuItem component={Link} to="/logout">
  Logout
</MenuItem>

containerElement 属性在 v0.x 中使用，从 v1 开始不再存在。

请参阅 MenuItem 的文档