Material-ui: not compatible with react-router Link

[jma7889]

I tried to use Link with Menu Item and List Item. Both don't work. As Link is the main navigation for react-router, if it doesn't work, then how can I make -ui work with react-router?

None of the below worked

`<ListItem primaryText="All mail" >
      <Link to="/foo">foo</Link>
</ListItem>`

Then I wrap Link with ListItem, not working neither.
Try the same thing with MenuItem, both not working.

-- update 1
It is working now with following syntax. Case can be closed. I wish this is documented.
<MenuItem linkButton={true} containerElement={<Link to="/foo" />} primaryText="Foo" />

[frankf-cgn]

@jma7889 Quite interesting question, but for now I can't see a bug here. Can we discuss on discordapp (Reactiflux/#material-ui) or on gitter?

[jma7889]

@frankf-cgn did see some previous discussion regarding this. About to try if any of those works. Yes, we can discuss on discord app. It's not a bug, more of a feature request.

-- update 1
It is working now with following syntax
<MenuItem linkButton={true} containerElement={<Link to="/foo" />} primaryText="Foo" />

[frnk94]

@jma7889 Otherwise you could just use Navigation mixin:

_handleLink: function(path) {
    this.transitionTo(path);
},
....
<ListItem primaryText="All mail"  onTouchTap={this._handleLink.bind(this, 'mail'}  />

[hourliert]

Thanks @jma7889. Would be nice if documented.

[oliviertassinari]

Should be fixed by https://github.com/callemall/material-ui/pull/2708.

[Dafrok]

@jma7889 If the right-icon-button or some other buttons in a listitem this way, for example:

<ListItem
  rightIconButton={<IconButton />}
  primaryText='some text'
  containerElement={<Link to={{pathname:"/"}} />

These buttons didn't work well.

[dahuchao]

I think, you made a mistake :
try this

<ListItem
  rightIconButton={<IconButton />}
  primaryText='some text'
  containerElement={<Link to="/"/>} />

[Paelsis]

containerElement with react-router Link works fine with MenuItem but not in ListItem.

[Unforgiven-wanda]

@Paelsis This. Wondering if it's going to be fixed.

[quasi-nova]

containerElement with react-router Link for TableRow would be helpful as well.

[MarcelRobitaille]

Are there any updates on this? Not even <MenuItem linkButton={true} containerElement={<Link to="/foo" />} primaryText="Foo" /> is working for me.

[iozeey]

@Iambecomeroot

This is how it worked for me.

 <MenuItem key={i} component={Link} to='/somelink' >
                      {option.primaryText}
</MenuItem>

Source
https://stackoverflow.com/a/47875510

[MarcelRobitaille]

@zeeshan-za-ahmad Working for me. Thanks.