Recibo una advertencia en un sitio React que construí
./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-validen el siguiente código:
<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>Aunque la advertencia aparece solo para el primer enlace, la misma advertencia ocurre en el siguiente enlace si elimino el primer enlace temporalmente o cambio el href del primer enlace a una URL estática.
Los enlaces deben aparecer solo como un icono.
He intentado cosas como usar un botón (no tenía el aspecto correcto), usar una función para abrir la URL dinámica e intentar forzar que href sea una cadena usando '' + {profile.website} . Muchas otras sugerencias no han funcionado.
¿Hay alguna forma de evitar el error sin cambiar las reglas jsx-a11y? ¿Lo que he hecho no es un buen patrón o es solo un error en React o JSX?
Use href="/#" para reemplazar href="#" O href="javascript:;" O href="javascript:void(0);"
Debería eliminar las advertencias.
Estos me funcionaron para deshacerme de la advertencia;
<a href="#/">...</a> <a href={() => false}>...</a>He usado href="!#" para eliminar advertencias.