React@16.9 block `javascript:void(0);`

See original GitHub issue

<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);”.

react@16.9

Issue Analytics

State:
Created 4 years ago
Comments:13 (3 by maintainers)

Top GitHub Comments

30reactions

hamlimcommented, Sep 16, 2019

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 👍

24reactions

j-lee8commented, Sep 27, 2019

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

Top Results From Across the Web

React 16.9.0 "javascript:;" href alternative? - Stack Overflow

After updating to React 16.9.0 I'm getting big warnings like this: Warning: A future version of React will block javascript: URLs as a...

[Solved]-React 16.9.0 "javascript:;" href alternative?-Reactjs

So probably one could replace a href="javascript:void(0)" with AHrefJavascript across the project and then just add an import for the component everywhere.

What does javascript:void(0) mean? - GeeksforGeeks

It is often used when inserting an expression in a web page might produce some unwanted effect. To remove this effect, “javascript:void(0)” is ......

CoffeeScript

CoffeeScript is a little language that compiles into JavaScript. ... var error; alert((function() { try { return nonexistent / void 0; } catch...

What does javascript:void(0) mean? - STechies

To prevent the default behaviour of a web page, you might face problems while using javascript: void(0) to React. For this JavaScript library,...