CODEWITHSUNDEEP
reactjsmaterial-uireact-router-dom
Bryan Stump
Bryan Stump

Reputation: 1439

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

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>

Upvotes: 8

Views: 10925

Answers (2)

Mikhail Shabrikov
Mikhail Shabrikov

Reputation: 8509

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>

Upvotes: 11

mrbenbot
mrbenbot

Reputation: 191

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

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

Upvotes: 17

Related Questions