score:4

Accepted answer

I think you need to give it the markup for the containerElement, something like this (rather than just the name of the element)

containerElement={<NavLink to="/home" />}

Give that a try and see if it works

score:2

The easiest solution is to put IconButton inside the Navlink, so whenever you click on the Iconbutton the NavLink is automatically clicked.

Here is a sample of the code:

<NavLink to="/" style={{ textDecoration: "none" }}>
  <IconButton>
    <Typography>Home</Typography>
  </IconButton>
</NavLink>

score:25

As of Material UI 1.0 the prop is called component:

import { Link } from 'react-router-dom'
import Button from 'material-ui/Button';

<Button component={Link} to="/open-collective">
  Link
</Button>

More about Buttons.

Update:

From Material UI v4 you may need to use forwardRef and wrap Link into a div:

const LinkRef = React.forwardRef((props, ref) => <div ref={ref}><Link {...props} /></div>)

<Button component={LinkRef} to="/open-collective">
  Link
</Button>

More here.


Related Query

More Query from same tag