Material-ui: IconButton & React Router Link

[brandonmp]

I have a toolbar with several IconButtons and I'm trying to turn them into react router <Link>s.

I tried the syntax @hai-cea posted in issue #908, but unfortunately it's causing my icon button to render at 0x0 px.

working JSX before:

<IconButton tooltip="Listings">
         <ListingsIcon color='white' />
</IconButton>

non-working JSX after:

<IconButton
         tooltip="Listings"
         containerElement={<Link to="/listings" />}
         linkButton={true}>

         <ListingsIcon color='white'/>
</IconButton>

and the icon button vanishes. It's still in the DOM according to React Tools, but every element in the hierarchy (<IconButton><EnhancedButton><Router>) is rendering at 0x0 px.

pretty new w/ React so apologies if this is an obvious mistake on my part, but have come up empty on my own research/troubleshooting.

[brandonmp]

turns out the problem boiled down to this:

wrong:
import Link from 'react-router

right:
import { Link } from 'react-router

ah, afternoon well spent. fml.

[tony-kerz]

@brandonmp if you use eslint, this plugin (and an editor that points out eslint transgressions) may be useful to bring that kind of thing to your attention sooner

[moshfeu]

For future readers, the way to do it now (material-ui 4) is:

import { Link } from 'react-router-dom';

<IconButton
  component={Link}
  to='/path'
>
  <Delete />
</IconButton>

[oliviertassinari]

https://material-ui.com/guides/composition/#routing-libraries for more details

[TheDiveO]

@oliviertassinari I've found the routing libraries link before luckily finding this issue report; while the explanation given in the routing libraries surely is comprehensive I found it to be completely over my head as a relatively newcomer. However, @moshfeu's example is concise and exactly what I'm looking for. Anything wrong with his simple example?