Zenn
Open1

アイコンのリンクはボタンか否か

React
Chakra UI
どるあがどるあが

アイコンを作って違うページへ遷移

フッターに以下のようなアイコンを設置し、リンクできるようにしたい

ボタンとして？機能を設定

onClickイベントを設定してアイコンを設置。しかしこれは上手くいかない。

FooterIcon.tsx
import { Box } from "@chakra-ui/react";
import React, { FC, memo } from "react";
import { FaGithub, FaTwitter } from "react-icons/fa";
import { SiZenn } from "react-icons/si";

export const IconType = {
  FaGithub,
  FaTwitter,
  SiZenn,
};

type Props = {
  type: keyof typeof IconType;
  url: string;
};

export const FooterIcon: FC<Props> = memo((props) => {
  const { type, url } = props;

  const onClickIcon = () => {
    window.location.href = url;
  };

  const IconSvgFile = IconType[type];

  return (
    <Box mx={1} _hover={{ cursor: "pointer" }}>
      <IconSvgFile onClick={onClickIcon} />
    </Box>
  );
});

これで一応リンクには飛べる。
何が問題かというと、

  • ボタン機能のため右クリックで新しいタブに開けない
  • コントロール押しながらクリックしても別タブで開くなど特殊な操作を受け付けない
  • 左下にリンクが出ないので、どこに飛ぶか不安
    などなど

解決方法

素直にaタグでリンクにしてしまえばいい

FooterIcon.tsx
export const FooterIcon: FC<Props> = memo((props) => {
  const { type, url } = props;

  const IconSvgFile = IconType[type];

  return (
    <Box mx={1} _hover={{ cursor: "pointer" }}>
      <a href={url}> // aタグでリンクにする
        <IconSvgFile /> // アイコンに機能は持たせない
      </a>
    </Box>
  );
});

これでマウスホバー中にリンクのURLが表示できる。

そういったことをさせたくない場合などもあるかもだけど、かなり特殊だと思うので基本的にaタグでリンク張ったほうがいい気がするね