how navigate using the MenuItem? material-ui V1

Question

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!

try import menuItem like this.... ===> import MenuItem from 'material-ui/MenuItem'; and import Menu seperately, then change back to containerElement — Gavin Thomas, Dec 18 '17 at 18:03
Did like that, got Module not found: Can't resolve 'material-ui/MenuItem'. Please take care of the post title, I said material-ui V1. — Abdulrahman Alsari, Dec 18 '17 at 18:07
https://stackoverflow.com/questions/43271690/react-material-ui-menuitem-containerelement-not-working Try this? I'm still searching for you, your code should work I'm unsure why it's not ATM. I also found this, last updated 8 days ago so pretty recent https://github.com/mui-org/material-ui/issues/204 — Gavin Thomas, Dec 18 '17 at 18:17
Thanks for your determination! is the solution. So please update your first reply with that SO post, I will vote it up and make it the answer. — Abdulrahman Alsari, Dec 18 '17 at 18:25
https://github.com/ReactTraining/react-router/issues/4411 Not home currently — Gavin Thomas, Dec 18 '17 at 20:34

Ken Gregory · Answer 1 · 2019-09-18T13:27:01.107

19

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

edited Sep 18 '19 at 13:27

answered Dec 18 '17 at 19:54

Ken Gregory

7,180
1
39
43

thank you for reply, I did your solution and I still get the 'to' attribute value being tied to existing URL! as I descriped in my update at this answer, and also opened a new post here for it. https://stackoverflow.com/questions/47875453/navlink-only-ties-its-to-attribute-value-to-existing-url-menuitem-on-materia – Abdulrahman Alsari Dec 18 '17 at 20:04
That has nothing to do with the original issue, which was how you can configure MenuItem so that it navigates to a route. The simplest way to do so is in the way I've outlined in my answer. – Ken Gregory Dec 18 '17 at 20:07
How do you handle this with TypeScript? When you use `component={Link}`, then add `to=""`, you get `[ts] Property 'to' does not exist on type 'IntrinsicAttributes & MenuItemProps & { children?: ReactNode; }'.` – Kizmar May 30 '18 at 15:51
3

Just answered my own question, this worked: ``... – Kizmar May 30 '18 at 15:57

Gavin Thomas · Accepted Answer · 2017-12-18T18:27:39.037

-1

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>

edited Dec 18 '17 at 18:27

answered Dec 18 '17 at 17:43

Gavin Thomas

1,827
2
11
17

I used the containerElement but had an error. let me try it again and paste the error in the post. – Abdulrahman Alsari Dec 18 '17 at 17:44
Are you sure you also setup your browser router? – Gavin Thomas Dec 18 '17 at 17:47
| updated post, looking forward to hearing from you – Abdulrahman Alsari Dec 18 '17 at 17:52
updated the post because of problem caused by the solution of that post on SO. Please check that. – Abdulrahman Alsari Dec 18 '17 at 19:21

how navigate using the MenuItem? material-ui V1

2 Answers2

Linked