Render Link in material ui Drawer

Question

I want to add my react-router links to Drawer. I tried this:

<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
   <Link to="/businesspartners">
      <MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
                rightIcon={<CommunicationBusiness />}
      >
         Business Partners
      </MenuItem>
   </Link>
</Drawer>

My problem is that the link will render underlined (like the image below).

Chris Owens · Answer 1 · 2018-05-28T01:51:55.967

15

I had similar concerns with using styles directly and came across the following answer: https://stackoverflow.com/a/48252439/522859

To summarize, use the component attribute on the ListItem:

<List>
   <ListItem button component={Link} to="https://www.google.com">
        <ListItemText primary="Google" />
   </ListItem>
</List>

The official docs cover it here: https://material-ui.com/api/list-item/

edited May 28 '18 at 01:51

answered May 28 '18 at 01:46

Chris Owens

5,076
12
61
131

3

Brilliant! Works. – Amin Ariana Oct 12 '18 at 17:20

Shubham Khatri · Accepted Answer · 2016-09-13T09:15:29.443

1

Use inline style textDecoration: 'none' for the link. <Link> gets rendered as a standard <a> tag, which is why we can apply textDecoration rule there.

<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
   <Link to="/businesspartners" style={{ textDecoration: 'none' }}>
      <MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
                rightIcon={<CommunicationBusiness />}
      >
         Business Partners
      </MenuItem>
   </Link>
</Drawer>

edited Sep 13 '16 at 09:15

answered Sep 13 '16 at 09:14

Shubham Khatri

270,417
55
406
400

1

I know this solution. But I suspected if I made a mistake because I was expecting the library to handle it. – alisabzevari Sep 13 '16 at 09:15
You don't need any library to handle it. This is the way to go :). Link attribute belongs to the react-router library . All its specifications is handled by react-router and text-decoration isn't one of them.material-ui and react-router are two isolated libraries. – Shubham Khatri Sep 13 '16 at 09:16
I meant material-ui library – alisabzevari Sep 13 '16 at 09:16

score 0 · Answer 3 · answered Apr 13 '21 at 12:52

I have faced the same issue but maybe a new update in materialUI due to this is not working, There has some tweak as import from import Link from '@material-ui/core/Link';

so it will works

     import Link from '@material-ui/core/Link';

     <List>
      <ListItem button component={Link} href="/dsda">
        <ListItemIcon>
          <DashboardIcon />
        </ListItemIcon>
        <ListItemText primary="DashBoard"/>
      </ListItem>
     </List>

Render Link in material ui Drawer

3 Answers3

Linked