React Componentで外部リンクを開く際にtarget="_blank" rel="noopener"を付与する

公開日時
更新日時

ReactのComponentで、外部リンクを開く際に[[target="_blank" rel="noopener"]]を付与するようにしたい。

以下のようにすれば、条件に応じたプロパティの設定ができる。


const Link: React.FunctionComponent = ({ url, title }) => {
  const linkProps = url => {
    if (url.match("^http")) {
      return {
        target: "_blank",
        rel: "noopener"
      };
    }
    return {};
  };
  
  return (
    <a
      className="block w-full h-full"
      href={url}
      {...linkProps(url)}
    >
      {title}
    </a>
  )
}

参考


Related #js