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
To make a React Material UI Raised Button link to an external URL, we can add a Button that has the variant prop set to contained . Then we set the href prop of the button to the URL we want to go to. to add a Button with the variant prop set to 'contained' to add a raised button.
You can use the component prop of Material-UI's Link to integrate with Link in react-router-dom . You can do the same thing with Material-UI's Button .
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
This works for me:
<FlatButton label="Details" containerElement={<Link to="/coder-details" />} linkButton={true} />
See https://github.com/callemall/material-ui/issues/850
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With