我需要找到一个解决方案,将react router的功能与material ui组件结合起来.

例如,我有一个场景:一个路由和一个按钮.我试着把它们混合在一起,重新设计它们的风格.

所以从一个简单的链接

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

我try 创建一个material ui按钮,如下所示

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

但我有以下错误和Javascript中断

不变的js?4599:38未捕获不变冲突:addComponentAsRefTo(…):只有所有者才能有引用.您可能正在向组件的render方法中未创建的组件添加引用,或者已加载多个React副本(详细信息:https://gist.github.com/jimfb/4faa6cbfb1ef476bd105).

你知道如何应对这种情况吗?

推荐答案

在新版本中的方法是:

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

// ... some code

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

看看这个thread或这个question

Reactjs相关问答推荐

有正确的方法来设置我的金牛座应用程序的图标吗?

Reaction路由的问题-在Effect使用API调用响应设置状态之前呈现页面

在继承值更改时重置react 挂钩窗体字段值

蚂蚁 Select .列表弹出窗口不会';有时不会出现

在 Next13 中将 props 传递给 onClick 从服务器到客户端组件

如何使用 App Router 和服务器组件在 Next.js 13 中实现分页

如何在 React Native 中渲染下面的对象数组?

Suspense/Await - 解析数据加载/保存到状态后无限循环

在 React JS 中编辑表格数据

Cypress 组件测试不渲染react 组件(但它的内容)

React Three Fiber mesh 标签在此浏览器中无法识别

如何通过单击多个选项中的特定项目在模态上呈现不同的标题?

用 jest 测试包裹在 redux 和 router 中的组件

调用 Statsig.updateUser 时 UI 不呈现

如何使用 cypress 获取 MUI TextField 的输入值?

用 scss 覆盖 MUI

在表格中显示具有自定义声明的用户状态

哪个是创建 React 应用程序的更好方法?

React Hooks 表单在日志(log)中显示未定义的用户名

找不到元素 - 这是参考问题吗?