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

Posted 2023-02-21

【中文标题】如何结合 ReactJs Router Link 和 material-ui 组件（如按钮）？

【英文标题】：How to combine ReactJs Router Link and material-ui components (like a button)?

【发布时间】：2016-11-06 08:52:36

【问题描述】：

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

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

【问题讨论】：

我遇到了这个问题，并且使用 material-ui，如果您对路由器的 browserHistory 做出反应并手动推送 url，使用 Link 有时会破坏样式

【参考方案1】：

这对我有用：

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

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

【讨论】：

效果很好！但是当按钮被禁用时我们如何禁用重定向呢？

在 v1 中，现在是 component=props => <Link to="/coder-details" ...props/>

@cyberwombat 提供的解决方案效果很好，但有一些注意事项。你可以在这里阅读更多：material-ui.com/guides/composition/#caveat-with-inlining

【参考方案2】：

在新版本中的做法是：

import  Link  from 'react-router-dom';

// ... some code

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

看看这个thread或者这个question

【讨论】：

重要说明是从react-router-dom 导入Link，而不是从material-ui 库中导入。那是我的错！

【参考方案3】：

在使用 typescript 的时候可以试试这个方法：

import  NavLink as RouterLink  from "react-router-dom";
import 
  Button,
  Collapse,
  ListItem,
  makeStyles,
  ListItemIcon,
  ListItemText,
 from "@material-ui/core";

type NavItemProps = 
  className?: string;
  depth: number;
  href?: string;
  icon?: any;
  info?: any;
  open?: boolean;
  title: string;
;

const NavItem: React.SFC<NavItemProps> = (

const CustomLink = React.forwardRef((props: any, ref: any) => (
    <NavLink
      ...props
      style=style
      to=href
      exact
      ref=ref
      activeClassName=classes.active
    />
  ));
  return (
    <ListItem
      className=clsx(classes.buttonLeaf, `depth-$depth`)
      disableGutters
      style=style
      key=title
      button
      component=CustomLink
      ...rest
    >
      <ListItemIcon>
        Icon && <Icon className=classes.icon size="20" />
      </ListItemIcon>
      <ListItemText primary=title className=classes.title />
    </ListItem>
  );
)

【参考方案4】：

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