如何使用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));

Updae

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

一般来说,我猜是因为和之间的区别!

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

Answer 1

你应该使用该component属性.可以使用Linkreact-router-dom中的组件:

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

该containerElement属性在v0.x中使用,在v1中不再存在.

请参阅MenuItem的文档