反应站点警告：href属性需要有效的地址。提供有效的可导航地址作为href值jsx-a11y / anchor-is-valid

Question

我在我建立的React网站上收到警告

int CODE_PAUSE_TIME = 3000; //IN MILLISEC
for(int i = 0; i<10; i++){
            //Write your code here before there is a pause
      try{
        Thread.sleep(CODE_PAUSE_TIME);
      }catch(Exception e){
         //write your code here after there is a pause.
      }

        }

使用以下代码：

./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

即使仅对第一个链接显示警告，如果我临时删除第一个链接或将第一个链接的href更改为静态URL，在下一个链接上也会出现相同的警告。

链接需要仅显示为图标。

我尝试了诸如使用按钮（外观不正确），使用打开动态url的功能以及尝试通过使用 <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强制为字符串之类的事情。许多其他建议没有用。

有没有一种方法可以在不更改jsx-a11y规则的情况下防止错误发生？是我做的不好的模式，还是React或JSX中的错误？

Answer 1

这些对我来说可以摆脱警告；

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

Answer 2

在没有<button>属性的情况下，请使用<a>代替href。

sandbox

如果您确实需要使用a标签，它可能会对您有所帮助：

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

Answer 3

这只是警告而不是href属性需要有效值的错误，因为＃指向无处可添加指向href属性的链接以删除此警告，或者如果您仍处于早期开发阶段，则只需编写

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

在代码之上，它将删除来自终端的警告，上面的行禁用了写入指定文件的规则

/* 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 4

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

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

Answer 5

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

它应该删除警告。

Answer 6

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

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

Answer 7

我已使用href="!#"删除警告。

Answer 8

您还可以通过添加eslint-disable-next-line注释来隐藏此警告：

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

Answer 9

如果您尝试动态呈现页面链接，则可以改用<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>;

如果在href属性中添加“ javascript”一词，则会收到红色警告：

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

参考：EsLint error resolution page

Answer 10

在＃后面插入空格，因此不再有警告

将href="#"替换为href="# " 但最好使用href="#something" => href="#profile"

Answer 11

如果我们写了正确的 url，但它也给出了与我输入 www.reactjs.org 相同的错误，那么它也会给出相同的警告。为了解决这些问题，我们在锚标签中有一个属性，即

<a
   className="App-link"
   href="https://reactjs.org"
   target="_blank"
   rel="noopener noreferrer"
    >
      Learn React
    </a>

1. 用于样式的类名。
2. 用于链接的href。
3. 用于在新标签页中打开链接的目标。
4. Rel 用于在反应中从该警告中得出结果。

Answer 12

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

签入这些链接。有些人与您有相同的问题，它来自链接组件。他们修复了在.eslintrc中添加异常的问题：

第一个链接=> https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/340 第二个链接=> How can I fix jsx-a11y/anchor-is-valid when using the Link component in React?

让我知道是否有帮助。

Answer 13

我尝试过，但上面的大多数答案对我都不起作用，因为较新的 eslint 不允许其中的大多数。相反，它提到禁用特定行的 eslint。

只需将：
// eslint-disable-next-line
添加到抛出错误的 jsx 行之前的行中。

此外，在 {/* ... */} 中添加此注释，否则会显示错误。

用法：{/* // eslint-disable-next-line */ }}

他们的建议是一样的：

希望这能解决它！

Answer 14

如果你真的希望你的锚标签有一个 onClick 方法，你必须使用一个有效的 href 链接，否则它会抛出一个错误，href 属性需要一个有效的值才能访问。如果您无法提供有效的 href，但仍需要该元素类似于链接，请使用按钮并使用适当的样式对其进行更改。

使用此属性更改按钮样式以使其透明

button{
        background-color: Transparent;
        background-repeat:no-repeat;
        border: none;
        cursor:pointer;
        overflow: hidden;
        outline:none;
}

并将按钮内的文本设置为类似链接颜色

我用过这个颜色

.editcolor{
        color: #1890ff;
}

我用这个方法解决了我的错误。

Answer 15

该游戏发布了，但没有人惊讶地推荐window.location，它只设置了与当前游戏相同的确切路线吗？

其他解决方案，例如“＃” ，“ /＃” 和“ /” 实际上是对当前路线的修改吗？对于更通用的解决方案，只需使用window.location即可保留当前页面而无需修改。

---

<a href="window.location" onClick={...}> Better Solution </a>

---

Answer 16

我已使用以下内容删除警告。

<a href="/">

Answer 17

尝试替换

target="#"

到

target="_blank"