How to add a link to a List in material-ui 1.0?

to use with "react-router-dom"

import { Link } from "react-router-dom";
<ListItem button component={Link} to="/design">

the example is based in this section: docs


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


The easiest way to accomplish this is to make the ListItem a link by using the component prop:

<List>
  <ListItem button component="a" href="https://www.google.com">
    <ListItemText primary="Google" />
  </ListItem>
</List>

That way, the ListItem will be an anchor tag linking to the desired place, but still receive the appropriate styling so that there won't be any visual changes.

The behavior of the component prop is documented here. Note that the href prop will be automatically passed to the anchor tag, as specified by the last line in the props documentation:

Any other properties supplied will be spread to the root element.


For usage with Next.js, this worked for me:

import Link from "next/link";

<List>
    <Link href="/myUrl" passHref>
        <ListItem button component="a">
            My Link Text
        </ListItem>
    </Link>
</List>