反应站点警告：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以及尝试使用强制将href设置为字符串之类的事情'' + {profile.website}。许多其他建议没有奏效。

有没有一种方法可以防止错误，而无需更改jsx-a11y规则？是我做的不好的模式，还是React或JSX中的错误？

Answer 1

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

它应该删除警告。

Answer 2

这些对我来说摆脱了警告；

<a href="#/">...</a>  
<a href={() => false}>...</a>

Answer 3

我曾经href="!#"删除警告。

Answer 4

为了防止默认，我使用这个：

<a href="/#" onClick={(e) => e.preventDefault()}>Link Text</a>

Answer 5

在 # 后插入空格，这样就不会再发出警告了

替换href="#"为href="# " 但更好，如果这样使用href="#something"=>href="#profile"

Answer 6

尝试更换

target="#"

到

target="_blank"

Answer 7

请在没有属性时使用<button>而不是。<a>href

官方参考

如果您真的必须使用a标签，它可能会帮助您：

<a href="#" onClick={ev => {ev.preventDefault(); onClick();}}>"Hello A Tag"</a>

Answer 8

This is just a warning not a error that href attribute requires a valid value as # points to nowhere you can add links to href attributes to remove this warnings or if you are still in early development phase just write

/* eslint-disable jsx-a11y/anchor-is-valid */

On top of your code it will remove the warnings from the terminal, the above line disables the rule for the specified file where it is written

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';

const Header = () =>{
    return(
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <a className="navbar-brand" href="#">Navbar</a>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
        </nav>
         )
}

Answer 9

我收到了类似的 href 警告，我做了如下。可以试试这个。我摆脱了警告，功能完好无损。我不确定这是正确的。但是试过这个。

let hrefLink = '#'; passed as a arg like href={hrefLink}

Answer 10

如果您尝试动态呈现页面链接，则可以将<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”一词放入 href 属性中，那么您将收到红色警告：

index.js:1375 警告：作为安全预防措施，React 的未来版本将阻止 javascript: URL。如果可以的话，请改用事件处理程序。

参考：EsLint错误解决页面

Answer 11

我在标签a中使用了href。它删除警告。

<a href>Pictures</a>

Answer 12

如果我指的是这个，我不认为有什么问题。 https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md

检查这些链接。有些人遇到了与您相同的问题，它来自 Link 组件。他们通过向 .eslintrc 添加异常来修复此问题：

第一个链接 => https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/340 和第二个链接 =>在使用 Link 组件时如何修复 jsx-a11y/anchor-is-valid反应？

让我知道是否有帮助。