【React】react-material-uiでリンクにdownload属性を付与する #React

概要

HTMLのアンカーリンクには、HTML5入門-download属性のページにある通り、指定したパスをクリックするとダウンロードが行われるよう設定できます。
react-material-uiではLinkのコンポーネントが用意されていますが、このLinkでクリック時にダウンロードが行われるにはどうするかメモ書きします。

対応

HTMLと同様にdownload属性が付与できますので、Linkコンポーネントにdownload属性を設定します。

実装サンプル

import { Link, Typography } from '@mui/material'

export const Sample = () => {
  return (
    <Link href="https://sample.com/test.csv" download>
      <Typography fontSize="14px">サンプルCSVダウンロード</Typography>
    </Link>
  )
}