React에서 Link 컴포넌트를 사용할 때 jsx-a11y/anchor-is-valid를 수정하려면 어떻게 해야 합니까?

React에서 Link 컴포넌트를 사용할 때 jsx-a11y/anchor-is-valid를 수정하려면 어떻게 해야 합니까?

In a React 앱

<Link to={`/person/${person.id}`}>Person Link</Link>

다음과 같은 eslint 오류가 발생합니다.

The href attribute is required on an anchor. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid

Link 컴포넌트는 유효합니다.href기여하다.

<a href="#/person/2">Person Link</a>

이 에러의 요점은 무엇입니까?이거 어떻게 고쳐야 돼요?

어떤 도움이라도 주시면 감사하겠습니다!

그Link컴포넌트가 생성되다hrefAtribute는 접근성 관점에서 앵커태그가 유효합니다.에 예외를 추가합니다..eslintrc:

{
  "rules": {
    "jsx-a11y/anchor-is-valid": [ "error", {
      "components": [ "Link" ],
      "specialLink": [ "to" ]
    }]
  }
}

또한 GitHub의 답변에도 같은 문제가 있습니다.

https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md에서 제안하는 바와 같이

다음 작업을 수행할 수 있습니다.nextjs documents에 기재되어 있듯이 태그가 내장된 링크컴포넌트를 호출합니다.그런 다음 Link 컴포넌트에서 passHref 프로펠을 사용하여 태그에 더미의 href 속성을 추가할 수 있습니다.

다음과 같은 경우:

<Link to={`/person/${person.id}`} passHref> <a href="replace">Person Link</a></Link>

이 방법은 효과가 있을 것입니다:) 위에서 제시한 eslint 무시 규칙은 나에게 효과가 없었습니다만, 이 솔루션은 효과가 있었습니다.또한 이 규칙에 관한 문서에서는 권장되는 규칙 중 하나입니다.

이것을 나의 것에 추가하다.eslintrcfile in setting > rules에 의해 문제가 수정되었습니다.

"jsx-a11y/anchor-is-valid": [
      "off",
      {
        "components": ["Link"],
        "specialLink": ["hrefLeft", "hrefRight"],
        "aspects": ["noHref", "invalidHref", "preferButton"]
      }
    ]

"a" 태그 안에 텍스트 내용을 쓰고 CSS로 숨길 수 있습니다(font-size:0px 등).

템플릿 리터럴을 작성하기 위해 단일 따옴표가 아닌 백틱을 넣어야 할 수도 있습니다.다음을 시도해 보십시오.

<Link to={`/person/${this.state.id}/edit`}>Edit</Link>

언급URL : https://stackoverflow.com/questions/47875730/how-can-i-fix-jsx-a11y-anchor-is-valid-when-using-the-link-component-in-react