Реагировать на предупреждение сайта. Атрибуту href требуется правильный адрес.Укажите действительный, навигационный адрес в виде значения href jsx-a11y / anchor-is-valid - PullRequest
Новая
       8

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

0 голосов
/ 14 октября 2018

Я получаю предупреждение на сайте 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>

Даже если предупреждение появляется только для первой ссылки, то же самоеПредупреждение появляется на следующей ссылке, если я временно удаляю первую ссылку или изменяю ссылку первой ссылки на статический URL.

Ссылки должны отображаться в виде значка.

У меня естьпробовал такие вещи, как использование кнопки (не имело правильного вида), использование функции для открытия динамического URL и попытка заставить href быть строкой с помощью '' + {profile.website}.Многие другие предложения не сработали.

Есть ли способ предотвратить ошибку, не изменяя правила jsx-a11y?То, что я сделал, не является хорошим шаблоном, или это просто ошибка в React или JSX?

Ответы [ 6 ]

0 голосов
/ 30 августа 2019

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

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

0 голосов
/ 14 августа 2019

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

0 голосов
/ 25 июня 2019

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

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

0 голосов
/ 12 февраля 2019

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

let hrefLink = '#'; passed as a arg like href={hrefLink}
0 голосов
/ 31 января 2019

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

target="#"

на 

target="_blank"
0 голосов
/ 14 октября 2018

Я не вижу что-то не так, если я ссылаюсь на это.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?

Дайте мне знать, если это помогает.

...