Reactサイト警告：href属性には有効なアドレスが必要です。href値jsx-a11y / anchor-is-validとして有効でナビゲート可能なアドレスを指定してください

Question

React私が構築したサイトで警告が出ます

./src/components/layout/Navbar.js [1]   Line 31:  The href attribute requires a valid 
address. Provide a valid, navigable address as the href value  jsx-a11y/anchor-is-valid

次のコードで：

          <p>
            {isEmpty(profile.website) ? null : (
              <a
                className="text-white p-2"
                href={profile.website}
                target="#"
              >
                <i className="fas fa-globe fa-2x" />
              </a>
            )}
            {isEmpty(profile.social && profile.social.Twitter) ? null : (
              <a
                className="text-white p-2"
                href={profile.social.Twitter}
                target="#"
              >
                <i className="fab fa-Twitter fa-2x" />
              </a>
            )}
            {isEmpty(profile.social && profile.social.facebook) ? null : (
              <a
                className="text-white p-2"
                href={profile.social.facebook}
                target="#"
              >
                <i className="fab fa-facebook fa-2x" />
              </a>
            )}
          </p>

最初のリンクに対してのみ警告が表示される場合でも、最初のリンクを一時的に削除するか、最初のリンクのhrefを静的URLに変更すると、同じ警告が次のリンクで発生します。

リンクは単なるアイコンとして表示する必要があります。

ボタンの使用（見た目が正しくありませんでした）、動的URLを開く関数の使用、'' + {profile.website}を使用してhrefを強制的に文字列にしようとすることなどを試しました。他の多くの提案はうまくいきませんでした。

Jsx-a11yルールを変更せずにエラーを回避する方法はありますか？私が行ったことは良いパターンではありませんか、それともReactまたはJSXのバグですか？

Answer 1

ページリンクを動的にレンダリングする場合は、<a>タグ<div>タグの代わりに。警告メッセージは消えます。

// DON't DO THiS
<a className="page-link" href="javascript:void(0);" onClick={() => onPageChange(page)}>
  {page}
</a>;

// TRY THIS INSTEAD
<div className="page-link" onClick={() => onPageChange(page)}>
  {page}
</div>;

"javascript" Wordをhref属性に入れると、RED WARNINGが表示されます。

index.js：1375警告：Reactの将来のバージョンでは、セキュリティ対策としてjavascript：URLがブロックされます。可能であれば、代わりにイベントハンドラーを使用してください。

参照： EsLintエラー解決ページ

Answer 2

eslint-disable-next-lineコメントを追加して、この警告を非表示にすることもできます。

// eslint-disable-next-line
<a
    onClick={e => {
        // do something
    }}
>
    example
</a>