[email protected] block javascript:void(0);

[fengxinming]

<a href="javascript:void(0);"></a>

Warning: A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:void(0);".

[email protected]

[aweary]

This was part of the 16.9 release. See https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-javascript-urls

[pllee]

@aweary is there a React recommended way to get the previous behavior of href="javascript:void(0);"? Not having an href gets rid of the default keyboard behavior tab and tab -> enter to behave like onClick. Using # gets that behavior but the onClick handler then has the onus of stopping the event propagation to not get the default browser behavior of scrolling to the top.

[hamlim]

You could use <button type="button" onClick={}>...</button>, the added benefit here is that the role of the element is better communicated to screen reader users using your feature 👍

[j-lee8]

We encountered this issue too. The following didn't work for us as it would refresh the page:

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

What did work was using the NavLink inside the react-router-dom library. We were already using it and it perfectly mimics the javascript:void(0) behaviour (but without the warning!).

<NavLink to="#" onClick={e => e.preventDefault()}>

[raxod502]

@aweary If the ability to use javascript:void(0) is being removed then React should ship an alternative way to create links that act like buttons. A brief glance at StackOverflow shows that there is no reasonable alternative to javascript:void(0). What about just whitelisting this specific string? That would solve this usability problem while not introducing any security concerns.

[dondmcg]

@aweary I agree with raxod502 I have a specific problem where I am using an API for authentication. If I change the element from a anchor to a button the API no longer works because the js that is not exposed to me is still looking for an a tag. I will be forced to put inline js for prevent default and change the href to a hash tag which I do not think is a good solution.

[gaearon]

See my reply in #16382 (comment).

[raxod502]

When I posted my original comment, I was under the mistaken impression that you could not work around the problem by setting href="#" and adding event.preventDefault() to the onClick handler. (I must have tested incorrectly.)

Could this be prominently documented? Finding out about it deep in the issue tracker is a very bad user experience.

[mythz]

This change is unnecessarily user hostile.

What's the rationale for not whitelisting href="javascript:;" or href="javascript:void(0)" so everyone can have a minimally disruptive uncompromising solution?

[TomerHeber]

This is how I worked around it (created a new component):
(A bit more verbose because I'm using typescript).

import * as React from "react";

interface OnClickLinkProps {
  children: React.ReactChild | React.ReactChild[];
  className?: string;
  onClick: () => void;
}

export function OnClickLink(props: OnClickLinkProps): React.ReactElement {
  function onClick(event: React.MouseEvent<HTMLAnchorElement>) {
    event.preventDefault();
    props.onClick();
  }

  return (
    <a href="#" onClick={onClick} className={props.className || ""}>
      {props.children}
    </a>
  );
}

[ksenginew]

href attribute without value and equal sign works

<a href></a>

To make sure its cross browser compatible use unused ID.

<a href="#nolink"></a>

Don't add id="nolink" to any tag in HTML page.

[lynda0214]

href

The first one would throw a warning as follows:
Received true for a non-boolean attribute href

[kalemi19]

Another solution would be to not specify the href attribute at all.

<a>This is a placeholder hyperlink</a>

In HTML5, using an a element without an href attribute is valid. It is considered to be a "placeholder hyperlink."

No errors, no warnings. The only thing to keep in mind is that the cursor: pointer won't be added automatically.

Source: https://stackoverflow.com/a/19167175

[dancherb]

This warning is coming up for me using next.js's next/link tag, which requires a value for href, even when simply using it for onPress. None of the suggestions so far have been appropriate as a replacement for javascript:void(0).

Passing a href value and using it with e.preventDefault() isn't appropriate because there may be other effects you do want to capture (e.g. a dropdown registering the click and closing itself).

[wmzy]

The following method can avoid React errors:

<a href={maybeEmpty ?? 'blob:'>...</a>

The disadvantage is that clicking it will trigger a console error.