How to combine ReactJs Router Link and material-ui components (like a button)?

Question

I need to find a solution to be able to combine together the functionality of react router with the material ui components.

For instance, I've this scenario: a router and a button. What I tried to do it is to mix them together, and restyle them.

So from a simple link

<Link className={this.getClass(this.props.type)} to={`${url}`} title={name}>{name}</Link> 

I tried to create a material ui button as the following

<Link className={this.getClass(this.props.type)} to={`${url}`} title={name}>   <FlatButton label={name} /> </Link> 

but I have the following error and Javascript breaks

invariant.js?4599:38Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://gist.github.com/jimfb/4faa6cbfb1ef476bd105).

Do you have any idea how to manage this situation? Thank you in advance and if you need more information let me know

Answer 1

The way to do in new versions is:

import { Link } from 'react-router-dom';  // ... some code  render(){     return (         <Button component={Link} to={'/my_route'}>My button</Button>     ); } 

Look at this thread or this question

Answer 2

This works for me:

<FlatButton label="Details"              containerElement={<Link to="/coder-details" />}              linkButton={true} /> 

See https://github.com/callemall/material-ui/issues/850