Предупреждение сайта React: для атрибута href требуется действительный адрес. Укажите действительный адрес для навигации в качестве значения href jsx-a11y / anchor-is-valid

Я не вижу ничего плохого, если я говорю об этом. 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 а вторая ссылка => Как я могу исправить jsx-a11y / anchor-is-valid при использовании компонента Link в React?

Сообщите мне, если это поможет.

попробуйте заменить

target = "#"

к

target = "_blank"

Я получил аналогичное предупреждение для href, я сделал следующее. Может быть, попробуй это. Я избавился от предупреждения, и функциональность осталась неизменной. Я не уверен, что это правильно. Но попробовал это.

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

Используйте href = "/#" для замены href = "#" ИЛИ href = "javascript:;" ИЛИ href = "javascript:void(0);"

Следует удалить предупреждения.

Я использовал href = "!#" для удаления предупреждений.

Вставьте пробел после #, чтобы больше не было предупреждений об этом

заменить href = "#" на href = "# " но лучше использовать вот так href = "#something" => href = "#profile"

Вы также можете скрыть это предупреждение, добавив комментарий eslint-disable-next-line:

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

пожалуйста, используйте <button> вместо <a>, когда нет атрибута href.

официальная ссылка

Если вам действительно нужно использовать тег a, он может вам помочь:

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

Если вы пытаетесь отобразить ссылку на страницу динамически, вы можете вместо этого заменить тег <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 Warning: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can.

Ссылка: Страница разрешения ошибки EsLint

Это помогло мне избавиться от предупреждения;

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

Это просто предупреждение, а не ошибка, что атрибут 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>
         )
}

Я использовал следующее, чтобы удалить предупреждения.

<a href = "/">

Поздно к игре, но никто не порекомендовал window.location, который просто устанавливает тот же точный маршрут, что и текущий?

Другие решения, такие как "#", "/ #" и "/", действительно изменяют текущий маршрут, верно? Для более общего решения просто используйте window.location, чтобы оставаться на текущей странице без изменений.

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

Если вы действительно хотите, чтобы ваш тег привязки имел метод onClick, вы должны использовать действительную ссылку href, иначе она выдаст ошибку. Атрибут href требует, чтобы действительное значение было доступно. Если вы не можете предоставить действительный href, но по-прежнему хотите, чтобы элемент напоминал ссылку, используйте кнопку и измените его соответствующими стилями.

Измените стиль кнопки с помощью этого свойства, чтобы сделать прозрачным

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

и установите для текста внутри кнопки цвет, похожий на цвет ссылки

Я использую этот цвет

.editcolor{
        color: #1890ff;
}

Я решил свои ошибки этим методом.

Чтобы также предотвратить дефолт, я использую это:

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

Я пробовал, но большинство приведенных выше ответов не сработали для меня, поскольку новый eslint не позволяет большинство из них. Вместо этого упоминается отключение eslint для конкретной строки.

Просто добавьте:
// eslint-disable-next-line
в строку, которая идет непосредственно перед строкой jsx, которая вызывает ошибку.

Также добавьте этот комментарий в {/ * ... * /}, иначе будет отображаться ошибка.

Использование: {/* // eslint-disable-next-line */ }}

То же самое советуют:

Надеюсь, это решит эту проблему!

Если мы написали правильный URL-адрес, но он также дает ту же ошибку, что и я поставил www.reactjs.org, тогда он также дает такое же предупреждение. Чтобы решить эту проблему, у нас есть атрибут в теге привязки, т.е.

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

1. className используется для стиля.
2. href используется для ссылок.
3. цель, используемая для открытия ссылки на новую вкладку или нет.
4. Rel используется для вывода этого предупреждения в реакции.

Я использовал href в теге a. это удалить предупреждения.

<a href>Pictures</a>