How to do routing with material-ui@next MenuItem?

Question

What's the best practice to implement routing using the material-ui@next? In the previous version I could use containerElement with a Link but doesn't work anymore. Couldn't find any help in the docs.

 <MenuItem containerElement={<Link to="/myRoute" />}>My Link</MenuItem>

score 16 · Answer 1 · answered Aug 01 '19 at 14:49

16

you can now give the MenuItem a component prop like this:

<MenuItem component={Link} to='/myRoute'>
go to my route
</MenuItem>

answered Aug 01 '19 at 14:49

mrbenbot

171
1
3

1

For React Router, the Link must be imported from `react-router-dom`, not `@mui` – IndieJune Oct 19 '22 at 02:57

Mikhail Shabrikov · Accepted Answer · 2020-02-28T10:17:35.970

11

You can use Link as parent component for MenuItem:

  <MenuList>
    <Link to="/myRoute" style={{ textDecoration: 'none', display: 'block' }}>
      <MenuItem>
        go to my route
      </MenuItem>
    </Link>
    <Link to="/anotherRoute" style={{ textDecoration: 'none', display: 'block' }}>
      <MenuItem>
        go to another route
      </MenuItem>
    </Link>
  </MenuList>

edited Feb 28 '20 at 10:17

answered Jan 26 '18 at 14:27

Mikhail Shabrikov

8,453
1
28
35

This only works if you click on the actual text. Any clue how to make the entire item clickable? – Bryan Stump Jan 27 '18 at 01:47
@BryanStump I modified the answer, check, please. – Mikhail Shabrikov Jan 27 '18 at 05:32
1

Unfortunately, the style is broken with this answer :( – Matthieu Brucher Jun 14 '19 at 19:50

How to do routing with material-ui@next MenuItem?

2 Answers2

Linked