如何合并ReactJs Router Link和material-ui组件(如按钮)？

ldxq2e6h 于 2023-06-22 发布在 React

关注(0)|答案(5)|浏览(133)

我需要找到一个解决方案，以便能够将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：38未捕获的不变违反：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在向组件添加一个引用，而该引用不是在组件的render方法中创建的，或者您加载了多个React副本（详情：https://gist.github.com/jimfb/4faa6cbfb1ef476bd105）。
你知道该怎么处理这种情况吗？提前感谢您，如果您需要更多的信息，请告诉我

reactjs

来源：https://stackoverflow.com/questions/38187833/how-to-combine-reactjs-router-link-and-material-ui-components-like-a-button

5条答案

按热度按时间

gojuced71#

在新版本中的方法是：

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

// ... some code

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

看看这个线程或者这个question

赞(0）回复(0）举报 2023-06-22

nzrxty8p2#

这对我很有效：

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

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

赞(0）回复(0）举报 2023-06-22

ymzxtsji3#

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

赞(0）回复(0）举报 2023-06-22

gojuced74#

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

赞(0）回复(0）举报 2023-06-22

rbpvctlc5#

Material UI按钮作为React Router链接要用作React Router链接，您可以使用Button的组件 prop 。

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

赞(0）回复(0）举报 2023-06-22

我来回答

如何合并ReactJs Router Link和material-ui组件(如按钮)？

5条答案

相关问题

热门标签

最新问答