如何結合 ReactJs Router Link 和 material-ui 組件（如按鈕）？

Question

我需要找到一個解決方案，以便能夠將 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。 您可能正在向未在組件的render方法中創建的組件添加 ref，或者您加載了多個 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>

Answer 4

使用打字稿時可以嘗試這種方式：

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>
  );
})