React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid
ReactjsAnchorJsxReactjs Problem Overview
I am getting a warning on a React site I built
./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
on the following code:
<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>
Even tho the warning appears only for the first link, the same warning occurs on the next link if I remove the first link temporarily or change the href of the first link to a static URL.
The links need to appear as just an icon.
I have tried things such as using a button (did not have the correct look), using a function to open the dynamic url, and trying to force the href to be a string by using '' + {profile.website}
. Many other suggestions have not worked.
Is there a way to prevent the error, without changing the jsx-a11y rules? Is what I have done not a good pattern, or is it just a bug in React or JSX?
Reactjs Solutions
Solution 1 - Reactjs
Use href="/#"
to replace href="#"
OR href="javascript:;"
OR href="javascript:void(0);"
It should remove the warnings.
Solution 2 - Reactjs
These worked for me to get rid off the warning;
<a href="#/">...</a>
<a href={() => false}>...</a>
Solution 3 - Reactjs
I've used href="!#"
to remove warnings.
Solution 4 - Reactjs
Insert space after # so no more warning about it
replace href="#"
to href="# "
but better if use like that href="#something"
=> href="#profile"
Solution 5 - Reactjs
This is just a warning not a error that href attribute requires a valid value as # points to nowhere you can add links to href attributes to remove this warnings or if you are still in early development phase just write
/* eslint-disable jsx-a11y/anchor-is-valid */
On top of your code it will remove the warnings from the terminal, the above line disables the rule for the specified file where it is written
/* 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>
)
}
Solution 6 - Reactjs
To also prevent default I use this:
<a href="/#" onClick={(e) => e.preventDefault()}>Link Text</a>
Solution 7 - Reactjs
try replacing
target="#"
to
target="_blank"
Solution 8 - Reactjs
please use <button>
instead of <a>
when there's no href
attribute.
If you really have to use the a
tag, it maybe help you:
<a href="#" onClick={ev => {ev.preventDefault(); onClick();}}>"Hello A Tag"</a>
Solution 9 - Reactjs
I got the similar warning for href, I did as follows. May be try this. I got rid of the warning and functionality is intact. I am not sure this is correct. But tried this.
let hrefLink = '#'; passed as a arg like href={hrefLink}
Solution 10 - Reactjs
If you are trying to render a page link dynamically then you can switch out an <a>
tag for a <div>
tag instead. The warning message will go away.
// 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>;
If you put "javascript" word in the href attribute then you will get a RED WARNING:
> index.js:1375 Warning: A future version of React will block > javascript: URLs as a security precaution. Use event handlers instead > if you can.
Reference: EsLint error resolution page
Solution 11 - Reactjs
You also can hide this warning adding a eslint-disable-next-line
comment:
// eslint-disable-next-line
<a
onClick={e => {
// do something
}}
>
example
</a>
Solution 12 - Reactjs
I've used the following to remove warnings.
<a href="/">
Solution 13 - Reactjs
If we have written correct url but it also gives the same error like I put www.reactjs.org then it also gives the same warning. To resolve these problem we have an attribute in anchor tag i.e.
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
- className used for style.
- href used for links.
- target used for open a link into new tab or not.
- Rel is used to outcome from that warning in react.
Solution 14 - Reactjs
I've used the href in tag a. it's remove warnings.
<a href>Pictures</a>
Solution 15 - Reactjs
I don't see something wrong if I'm refering to this. https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
Check in these links. Some people had the same problem than you and it comes from a Link component. They fix it in adding an exception to .eslintrc:
first link => https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/340 and the second link => https://stackoverflow.com/questions/47875730/how-can-i-fix-jsx-a11y-anchor-is-valid-when-using-the-link-component-in-react
Let me know if it's helping.
Solution 16 - Reactjs
Late to the game but surprised no one recommended window.location
, which simply sets the same exact route as the current?
Other solutions such as "#", "/#", and "/" actually modify the current route right? For a more generic solution just use window.location
to stay on the current page without modification.
<a href="window.location" onClick={...}> Better Solution </a>
Solution 17 - Reactjs
Solution 18 - Reactjs
I tried but most of the answers above did not work for me since the newer eslint does not allow most of them. Instead, it mentions disabling eslint for the specific line.
Simply add: // eslint-disable-next-line
to the line which comes just before the jsx line that throws error.
Also, add this comment within {/* ... */} else it will show error.
Usage: {/* // eslint-disable-next-line */ }}
Hope this solves it!