title: React 16.9.0 "javascript:;" href alternative?
body: <p>After updating to React 16.9.0 I'm getting big warnings like this:</p>
  
  <blockquote>
    <p>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:;".</p>
  </blockquote>
  
  <p>It comes from code like this:</p>
  
  <pre><code>const Component = ({someAction}) =&gt; (
    &lt;a href="javascript:void(0)" onClick={someAction}&gt;click me&lt;/a&gt;
  );
  </code></pre>
  
  <p>Looking at the StackOverflow question about <a href="https://stackoverflow.com/q/134845/935676">which “href” value should I use for JavaScript links</a> in HTML it seems most of you agree <code>javascript:void(0)</code> is the best option, which will be no longer possible in React 16.9.0.</p>
  
  <p>Just replacing with <code>href="#"</code> is problematic, since the browser will scroll to the top of the page and change the displayed URL. Especially if you use hash-links for routing this is very problematic.</p>
  
  <p>I could update my whole codebase to have <code>e.preventDefault();</code> in each and every event handler, but this seems hard to do, especially when the event handlers are automatically created from Redux action creators or hooks. I do not look for the answer "just include <code>e.preventDefault();</code>" everywhere!</p>
  
  <p>Also using a <code>&lt;button&gt;</code> means I have to deal with lots of unwanted styles applied.</p>
  
  <p>So I was wondering: Are there any solutions <strong>specific to the library React</strong> to get a working <code>&lt;a&gt;</code> link that just triggers an action without side effects? I want to <strong>change the code as little as possible</strong> and get rid of deprecation warnings.</p>