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

Question

我需要找到一个解决方案，以便能够将 React 路由器的功能与材料 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 可以有 refs。您可能正在向未在组件的 render 方法内创建的组件添加 ref，或者您加载了 React 的多个副本（详细信息：https: //gist.github.com/jimfb/4faa6cbfb1ef476bd105 ） .

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

原文由 axel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

新版本的做法是：

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

// ... some code

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

看看这个 线程 或这个 问题

原文由 UselesssCat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这对我有用：

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

请参阅 https://github.com/callemall/material-ui/issues/850

原文由 Jeff Ogata 发布，翻译遵循 CC BY-SA 3.0 许可协议