Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 883
axel Avatar asked Jul 04 '16 15:07

axel


People also ask

How do I add a link to a material UI button?

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.

Can you use material UI link with react-Router-dom link?

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 .


2 Answers

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

like image 102
UselesssCat Avatar answered Oct 16 '22 10:10

UselesssCat


This works for me:

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

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

like image 40
Jeff Ogata Avatar answered Oct 16 '22 12:10

Jeff Ogata