reactjs - React 站点警告 : The href attribute requires a valid address. 提供有效的可导航地址作为 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 强制 href 为字符串.网站}。许多其他建议都没有奏效。

有没有办法在不更改 jsx-a11y 规则的情况下防止错误？我所做的不是一个好的模式，还是只是 React 或 JSX 中的一个错误？

Answer 1

使用 href="/#" 替换 href="#" 或 href="javascript:;" 或 href="javascript:void(0);"

它应该删除警告。