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

Question

我需要找到一种解决方案，能够将React Router的功能与Material UI组件结合起来。

例如，我有这样一个场景：一个路由和一个按钮。我试图将它们混合在一起并重新样式化。

因此，从一个简单的链接

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

我尝试创建一个如下所示的 Material UI 按钮

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

但我遇到了以下错误，导致Javascript出现问题。

invariant.js?4599:38Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://gist.github.com/jimfb/4faa6cbfb1ef476bd105).

您知道如何解决这个问题吗？

谢谢您提前的帮助，如果您需要更多信息，请告诉我。

- axel

---

我遇到了这个问题，使用material-ui时，有时候使用Link会破坏样式，你应该使用react router的browserHistory并手动推送URL。 - Golan Kiviti

Answer 1

在新版本中的操作方式是：

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

// ... some code

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

看看这个帖子或这个问题

- UselesssCat

---

重要提示是从react-router-dom库中导入Link，而不是从material-ui库中导入。那是我的错误！ - Mir-Ismaili

Answer 2

这对我有用：

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

请查看 https://github.com/callemall/material-ui/issues/850。

- Jeff Ogata

---

工作得很好！但是当按钮被禁用时，我们如何禁用重定向？ - JohnnyQ

在v1版本中，现在变成了component={props => <Link to="/coder-details" {...props}/>}。 - cyberwombat

@cyberwombat提供的解决方案非常好，但它有一些注意事项。您可以在此处阅读更多信息： https://material-ui.com/guides/composition/#caveat-with-inlining - NowNick

Answer 3

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

- Tanu

Answer 4

当使用 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>
  );
})

- Amarshan

Answer 5

Material UI按钮作为React Router链接 要将其用作React Router链接，您可以使用Button的component属性。

import { Button } from '@mui/material';
import { Link } from 'react-router-dom';

export default function MyComponent() {
  return (
    <div>
      <Button component={Link} to="/posts">
        Posts
      </Button>
    </div>
  );
}

- sundsx

Answer 6

MUI Button上没有组件属性prop，所以我添加了这个。

const navigate = useNavigate()
        <Button
          type="button"
          variant="text"
          onClick={() => navigate(Routes.yourPath)}
        >
          Hello
        </Button>

- Jemy