如何结合ReactJs Router Link和material-ui组件（如按钮）？

Question

我需要找到一种解决方案，以将React Router的功能与材料ui组件结合在一起。

例如，我有这种情况：路由器和按钮。我试图做到的是将它们混合在一起，然后重新设计它们的样式。

所以从一个简单的链接

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

我试图创建一个材料UI按钮如下

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

但我有以下错误，Javascript中断

invariant.js？4599：38Uncaught Invariant Violation：addComponentAsRefTo（...）：只有ReactOwner可以拥有引用。您可能正在向未在组件的render方法内部创建的组件添加引用，或者您已加载React的多个副本（详细信息：https : //gist.github.com/jimfb/4faa6cbfb1ef476bd105）。

您知道如何处理这种情况吗？预先谢谢您，如果您需要更多信息，请告诉我

Answer 1

在新版本中的做法是：

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

// ... some code

render(){
    return (
        <Button component={Link} to={'/my_route'}>My button</Button>
    );
}

看看这个线程或这个问题

Answer 2

这对我有用：

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

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

Answer 3

<Button
          size="large"
          color="primary"
          onClick={() => {}}
          variant="outlined"
          component={RouterLink}
          to={{
            pathname: `enter your path name`,
          }}
        >
          Click Here
        </Button>