如何在 ReactJS 中的 IconButton 中放置 Routerlink答案

【问题标题】：How to Put Routerlink in IconButton in ReactJS如何在 ReactJS 中的 IconButton 中放置 Routerlink
【发布时间】：2020-09-14 02:04:54
【问题描述】：

如何将 routerlink 放入 reactjs 按钮？

我在下面尝试了这两个：第一个改变颜色，而第二个，我不喜欢它，因为它正在重新加载页面。

第一

<Link to="/settings">
    <IconButton color="inherit">
        <SettingsIcon />
    </IconButton>
</Link>

第二次

<IconButton color="inherit" href="/settings">
    <SettingsIcon />
 </IconButton>

【问题讨论】：

你不喜欢用useHistory推新路由吗？
你能展示一下吗？
将onClick添加到IconButton并在回调函数中：history.push('/settings')
@BeHappy。谢谢。又是一个包，呵呵。
我不明白你的意思。 :(

标签： reactjs react-router react-router-dom react-material

【解决方案1】：

@BeHappy 的解决方案很好，但是您可以使用组合来实现它。无需使用钩子。

import React from 'react';
import { Link } from 'react-router-dom';
import { IconButton } from '@material-ui/core';
import SettingsIcon from '@material-ui/icons/Settings';

export default function Component() {
  return (
    <IconButton component={Link} to="/setting">
      <SettingsIcon />
    </IconButton>
  );
}

【讨论】：

我试过了，在 Typescript 上得到了错误 :-( （没有重载匹配这个调用。）关于页面
将component 属性设置为Link 在技术上似乎可行，但会破坏按钮的样式。使用此方法后，按钮未对齐，指示悬停的灰色圆圈消失了。

【解决方案2】：

import React from "react";
import { useHistory } from "react-router-dom";

export default function Component() {
    const history = useHistory();

    return (
        <IconButton color="inherit" onClick={() => history.push("/setting")}>
            <SettingsIcon />
        </IconButton>
    );
}

【讨论】：

如果你这样做，那么按钮的行为就不会像一个链接。例如，它不会在鼠标悬停时显示链接目标，“复制 URL”可能不起作用，中键可能无法在新选项卡/窗口中打开链接。

【解决方案3】：

我能够将Link 注入IconButton，如下所示。这种方法通过在包装Link 组件的span 中捕获它们来保留material-ui 类和CSS 样式。同样的span也用于存储前向引用ref。我不确定为什么需要它，但忽略它似乎会产生警告。

import React from "react";
import { IconButton } from '@material-ui/core';
import SettingsIcon from '@material-ui/icons/Settings';

export default function Component() {
  return (
    <IconButton component={React.forwardRef(
      ({children, ...props}, ref) => (
        <span {...props} ref={ref}><Link>{children}</Link></span>
      )
    )}>
      <SettingsIcon />
    </IconButton>
  )
}

【讨论】：