我在我构建的 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 中的一个错误?
最佳答案
使用 href="/#"
替换 href="#"
或 href="javascript:;"
或 href="javascript:void(0);"
它应该删除警告。
关于reactjs - React 站点警告 : The href attribute requires a valid address. 提供有效的可导航地址作为 href 值 jsx-a11y/anchor-is-valid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52801051/