React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid

Question

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 though 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?

I tried using single and double quotes and backticks, it was not valid. If you could provide an example I will try it again, I may have not had them correct! — msm1089, Oct 14 '18 at 09:21

Tunji Oyeniran · Answer 1 · 2020-09-17T07:26:25.813

198

Use href="/#" to replace href="#" OR href="javascript:;" OR href="javascript:void(0);"

It should remove the warnings.

edited Sep 17 '20 at 07:26

answered Jun 25 '19 at 13:04

Tunji Oyeniran

3,948
1
18
16

8

the javascript trick doesn't seem to work in eslint 7.0.0 `The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles.` – Sonic Soul Jun 11 '20 at 19:41
3

The JS community... Shouldn't we at least wonder what the warning is about and discuss the implications of side-stepping it? – bluenote10 Nov 23 '20 at 20:05
1

And instead of using a hack to suppress the warning, why not simply tell the linter `// eslint-disable-next-line` on that particular line? – bluenote10 Nov 28 '20 at 09:31
This seems to be a silly warning for anchor links. – JoeD Mar 27 '23 at 15:16

Jonathan Akwetey Okine · Answer 2 · 2020-05-16T22:36:45.460

37

These worked for me to get rid off the warning;

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

edited May 16 '20 at 22:36

answered May 16 '20 at 22:31

Jonathan Akwetey Okine

1,295
2
15
18

4

Or just `...`. – Yuri Cardoso Jul 13 '20 at 04:37
2

No yuri that would redirect to root not deny to redirect – hUwUtao Oct 29 '21 at 06:28

score 22 · Answer 3 · edited Aug 14 '19 at 08:26

22

I've used href="!#" to remove warnings.

edited Aug 14 '19 at 08:26

ross

2,684
2
13
22

answered Aug 14 '19 at 08:19

Bojan Vlatkovic

229
2
2

7

As I tried this Ive noticed that it is forcing page to render totally. So Ive used href="#!" – andrecj Dec 08 '19 at 16:22

score 17 · Answer 4 · answered Aug 07 '20 at 07:32

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

Is there a way i can have the above solution in my eslint rules? — Dijiflex, Jan 23 '21 at 18:34
I just wanted to know how to confugure it on my eslint rules and i already go the solution — Dijiflex, Jan 24 '21 at 08:41
Give a path to href then it will not show this eslint rules or put the comment as shown in the above solution — Sandeep Mukherjee, Jan 25 '21 at 17:26

score 16 · Answer 5 · answered Feb 16 '21 at 17:52

16

To also prevent default I use this:

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

answered Feb 16 '21 at 17:52

Hovhannes Bantikyan

351
5
14

gcs_dev · Answer 6 · 2019-11-27T16:35:18.193

13

Insert space after # so no more warning about it

replace href="#" to href="# " but better if use like that href="#something" => href="#profile"

edited Nov 27 '19 at 16:35

answered Aug 30 '19 at 12:42

gcs_dev

351
3
7

"# " It works but it is sooooo ugly. Always is good to have options so thank you! – Rafael S. Fijalkowski Mar 20 '20 at 14:02

TorvaldsDB · Answer 7 · 2020-04-02T02:12:15.327

11

please use <button> instead of <a> when there's no href attribute.

official reference

If you really have to use the a tag, it maybe help you:

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

edited Apr 02 '20 at 02:12

answered Mar 25 '20 at 03:50

TorvaldsDB

766
9
8

score 10 · Answer 8 · answered Jan 31 '19 at 12:23

10

try replacing

target="#"

to

target="_blank"

answered Jan 31 '19 at 12:23

Rajbir Singh

101
1
6

this seems to be much cleaner approach – finickyTunnel Jun 13 '20 at 13:03

score 7 · Answer 9 · edited Feb 12 '19 at 08:42

7

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}

edited Feb 12 '19 at 08:42

Eric Aya

69,473
35
181
253

answered Feb 12 '19 at 04:23

Vijay Chintham

73
1
4

score 5 · Answer 10 · answered Apr 04 '20 at 14:09

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

score 5 · Answer 11 · answered Sep 08 '21 at 04:48

5

I've used the href in tag a. it's remove warnings.

<a href>Pictures</a>

answered Sep 08 '21 at 04:48

Infomaster

793
7
8

score 3 · Answer 12 · answered Mar 20 '20 at 14:17

3

You also can hide this warning adding a eslint-disable-next-line comment:

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

answered Mar 20 '20 at 14:17

Rafael S. Fijalkowski

625
7
13

score 3 · Answer 13 · edited Sep 28 '20 at 10:11

3

I've used the following to remove warnings.

<a href="/">

edited Sep 28 '20 at 10:11

jnovack

7,629
2
26
40

answered Sep 28 '20 at 09:28

Lê Vũ Lâm

317
4
7

3

Hi, welcome to StackOverflow. A lot of times, people not only want an answer, but to learn why their mistake existed in the first place. Could you please elaborate on your answer so the OP and others can learn? – jnovack Sep 28 '20 at 10:12

score 1 · Answer 14 · answered Jul 28 '21 at 09:17

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.

ChristopheG · Answer 15 · 2018-10-14T09:33:48.963

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 => How can I fix jsx-a11y/anchor-is-valid when using the Link component in React?

Let me know if it's helping.

score 0 · Answer 16 · answered Dec 07 '20 at 03:03

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>

score 0 · Answer 17 · edited Dec 19 '20 at 17:08

If you really want your anchor tag to have an onClick method you must use a valid href link orelse it will throw an error , The href attribute requires a valid value to be accessible. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles.

Change you button style with this property to make transparent

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

and set the text inside the button to the resemble link color

I have use this color

.editcolor{
        color: #1890ff;
}

I resolved my errors with this method.

Vani Gupta · Answer 18 · 2021-06-11T14:10:30.223

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

They advise the same thing:

Hope this solves it!

score 0 · Answer 19 · answered Nov 15 '22 at 02:55

0

You just need to change "#" to "# ". Good luck

answered Nov 15 '22 at 02:55

Phát papa

1
2

Shakil- The Coding monster · Answer 20 · 2022-11-24T12:56:50.777

0

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

or just use

href="/"

edited Nov 24 '22 at 12:56

answered Nov 24 '22 at 01:29

Shakil- The Coding monster

653
8
8

score 0 · Answer 21 · answered Feb 06 '23 at 12:33

0

Do Not Use: <a href='#'>Something</a> but instead use: <a href='/'>Something</a>

answered Feb 06 '23 at 12:33

Dejvi Epa

53
4

React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid

21 Answers21