Material UI Menu using routes

问题

I am toying with material-ui. I implemented LeftNav using routes, but I could not find a way to get IconMenu, or Menu working with links or routes. Anyone can point me to a good source / tutorial? The documentation falls short, and both components seem not to support 'menuItems' as property as LeftNav does.

回答1:

2016 December Edit: the linkButton prop is deprecated, you will get a warning:

Warning: Unknown props `linkButton` on <a> tag.

So simply remove the prop:

<MenuItem
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

Here's an Example Repo, and the Live Demo Here.

Original answer:

Just wanted to point out that if you're using react-router, you might want to use <Link to="/some/page" /> rather than the <a> tag.

To do this, you need to use the containerElement prop

<MenuItem
  linkButton
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

(the ={true} can be omitted if you're only passing true, in other words, <MenuItem linkButton /> is same as <MenuItem linkButton={true} />)

The containerElement and linkButton props is actually documented in the buttons section, but you can use it in MenuItem as well.

回答2:

You can set the linkButtton prop on MenuItem to generate a link, then also add an href.

<MenuItem linkButton={true} href="link/to/some/page" primaryText="Sample Link" />

回答3:

Starting with Material-UI 1.0, the new syntax is:

<MenuItem
  component={Link}
  // the 'to' prop (and any other props not recognized by MenuItem itself)
  // will be passed down to the Link component
  to="/profile"
>
  Profile
</MenuItem>

(Note: this example doesn't include an icon. There is a new ListItemIcon component for that.)

回答4:

The prop linkButton of EnhancedButton is deprecated. LinkButton is no longer required when the href property is provided. It will be removed with v0.16.0.

<MenuItem onTouchTap={this.handleClose} href="/link/data">Link Item</MenuItem>

Works fine

回答5:

None of the existing answers (of September 2018) worked for me with react 16.4.2 and react-router 4.2.2, so this was my solution:

<Link to='/notifications' style={{ textDecoration: 'none' }}>
   <MenuItem>Notifications</MenuItem>
</Link>

As you can see, the MenuItem component is surrounded by the Link component, and I added a style textDecoration: None not to have the item underlined.

回答6:

onTouchTap doesn't work for me I have to use onClick see the example below

  <MenuItem 
    onClick={this.logout}
    containerElement={<Link to="/" />}
    primaryText="Sign out"
    rightIcon={
      <b style={style.rightIcon}>
        <img
          className="menu-img"
          src="img/app/logout.png"
          alt="logout"
        />
      </b>
    }
  />

hope this will help others as well

回答7:

After doing a little searching myself I went with a slightly different solution:

<MenuItem onClick={() => {handleClose("/#about")}}>About me</MenuItem>

With a supporting JS function:

function handleClose(nav) {
    window.location.href = nav;
}

Hopefully proves of use as an alternative.

回答8:

I couldn't make the containerElement work on Safari in iOS with react-router. I'm using 0.17.2 of Material UI and react-router@v3 and here's a work around that worked for me:

  <MenuItem
    onTouchTap={() => {
      this._yourMethod()
      browserHistory.push('/howItWorks')
    }}
    primaryText="Menu Link"
  />

回答9:

Here is my implementation, which looks exactly like what in the material-ui official website. The component you can use include AppBar, Drawer and ListItem. The SelectableList can be implemented as let SelectableList = MakeSelectable(List).

<div>
  <AppBar 
    onLeftIconButtonTouchTap={this.handleLeftIconButtonTouchTap}
    title={title}
    showMenuIconButton={true}
    zDepth={0}
  />
    <Drawer 
      open={this.state.open} 
      docked={true} 
      onRequestChange={(open, reason) => {
        this.setState({open:false})
      }}
    >
      <AppBar title={title} />
      <SelectableList
        value={location.pathname}
        onChange={this.handleRequestChangeList}
       >
        <Subheader>Selectable Contacts</Subheader>
        <ListItem
          value={"link1"}
          primaryText="Link1"
        />
        <ListItem
          value={"link2"}
          primaryText="Link2"
        />
      </SelectableList>
    </Drawer>
 </div>

来源：https://stackoverflow.com/questions/32106513/material-ui-menu-using-routes

标签

reactjs

material-design

material-ui