【React】The href attribute requires a valid value to be accessible.警告を消す方法

最近Reactの勉強を始めたところで、毎日様々な問題に遭遇する。

今回はエラーではなくWarningだが、ReactコンポーネントのJSXでaタグを使用すると以下の警告文が表示される問題だ。

The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles.

警告が出る原因と解決法

先ほどの警告文を翻訳したものがこちら。

href属性にアクセスするには、有効な値が必要です。 href値として、有効でナビゲート可能なアドレスを指定します。有効なhrefを提供できないが、それでもリンクに似た要素が必要な場合は、ボタンを使用して適切なスタイルに変更してください。

コンポーネント内でhref属性に空文字を与えていたのだが、どうやらこれが原因のようだ。

<a className="delBtn" href="" onClick={e => deleteTask(e, index)}>

JSXでは上記のような書き方や、href="#"なども推奨されず、特にリンク先を指定せずにaタグを使う場合は以下のように書く必要がある。

<a className="delBtn" href={() => false} onClick={e => deleteTask(e, index)}>

これで、前述の警告文は表示されなくなった。