반응 사이트 경고:href 속성에는 유효한 주소가 필요합니다.유효한 주소를 href 값 jsx-a11y/anchor-is-valid로 지정합니다.

반응 사이트 경고:href 속성에는 유효한 주소가 필요합니다.유효한 주소를 href 값 jsx-a11y/anchor-is-valid로 지정합니다.

내가 만든 리액트 사이트에서 경고가 표시됨

./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 규칙을 변경하지 않고 오류를 방지할 수 있는 방법이 있습니까?제가 한 것은 좋은 패턴이 아닌 건가요, 아니면 리액트나 JSX의 버그에 불과합니까?

href="/#"href="#" ★★★href="javascript:;" ★★★href="javascript:void(0);"

경고가 삭제될 것입니다.

이것들은 나에게 경고를 없애는 데 도움이 되었다.

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

가 쓴 적이 있어요.href="!#"경고를 제거합니다.

이 경고는 href 속성에 링크를 추가하여 이 경고를 삭제하거나 아직 초기 개발 단계에 있는 경우 write만 작성하면 됩니다.

/* 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>
         )
}

기본값을 방지하려면 다음을 사용합니다.

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

# 뒤에 공백을 삽입하여 경고를 더 이상 받지 않도록 합니다.

href="#"로로 합니다.href="# " 더 .href="#something"> =>href="#profile"

★★★★★★★를 사용해 주세요.<button><a> 때href여하하다

공식 참고 자료

이 말을 한다면a이 될 수도

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

교체해 보다

target="#"

로.

target="_blank"

나는 href에 대해서도 비슷한 경고를 받았고, 나는 다음과 같이 했다.이거 먹어볼 수도 있어.경고를 제거했고 기능은 정상입니다.나는 이것이 맞는지 확실하지 않다.근데 이거 먹어봤어.

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

링크를 는, 「」를 할 수 .<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 오류 해결 페이지

태그 a에 href를 사용했는데 경고 제거예요

<a href>Pictures</a>

이 경고를 숨길 수도 있습니다.eslint-disable-next-line코멘트:

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

경고를 제거하기 위해 다음을 사용했습니다.

<a href="/">

url은 올바르게 기재되어 있지만, www.reactjs.org에 입력한 것과 같은 에러가 표시되는 경우는, 같은 경고도 표시됩니다.이러한 문제를 해결하기 위해 앵커 태그에 속성이 있습니다.

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

1. style에 사용되는 className.
2. 링크에 사용되는 href.
3. 새 탭으로 링크를 여는 데 사용되는 대상입니다.
4. Rel은 해당 경고의 반응 결과에 사용됩니다.

내가 이것을 언급한다면, 나는 잘못된 것이 보이지 않는다.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 및 두 번째 링크 = > React에서 Link 컴포넌트를 사용할 때 jsx-a11y/sys-is-valid를 수정하려면 어떻게 해야 합니까?

도움이 되는지 알려주세요.

경기 시작은 늦었지만 아무도 추천하지 않았다.window.location현재와 같은 경로를 설정하는 것 뿐입니까?

"#", "/#", "/" 등의 다른 솔루션이 현재 경로를 실제로 변경합니다.보다 일반적인 솔루션에는window.location수정 없이 현재 페이지를 유지할 수 있습니다.

---

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

---

앵커 태그에 onClick 메서드를 사용하는 경우 유효한 href 링크를 사용해야 합니다.href Atribute에 액세스하려면 유효한 값이 필요합니다.유효한 href를 제공할 수 없지만 링크와 유사한 요소가 필요한 경우 버튼을 사용하여 적절한 스타일로 변경합니다.

투명하게 만들려면 이 속성으로 단추 스타일 변경

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

버튼 안의 텍스트를 링크 색상과 비슷하게 설정합니다.

나는 이 색을 사용해야 한다.

.editcolor{
        color: #1890ff;
}

나는 이 방법으로 나의 오류를 해결했다.

시도했지만, 새로운 eslint에서는 대부분의 답변이 허용되지 않기 때문에 위의 답변은 저에게 효과가 없었습니다.대신, 특정 회선의 eslint 를 무효로 하는 것에 대해 설명하고 있습니다.

간단하게 추가:
// eslint-disable-next-line
에러를 발생시키는 jsx 행 바로 앞에 오는 행으로 이동합니다.

또, 이 코멘트를 {/*}내에 추가해 주세요.*/} 를 지정하지 않으면 에러가 표시됩니다.

: 사법 usage :{/* // eslint-disable-next-line */ }}

이치노

아아아아아악!

'#'을 '#'으로 바꾸면 돼요. 행운을 빌어요.

  <li className="nav-item pointer">
     <a onClick={logout} href="/#"  className="nav-link">
        LOGOUT
     </a>
  </li>

또는 그냥 사용하다

href="/"

안 함: " " " " " :<a href='#'>Something</a> 씁니다.<a href='/'>Something</a>

언급URL : https://stackoverflow.com/questions/52801051/react-site-warning-the-href-attribute-requires-a-valid-address-provide-a-valid