react-router: How to disable a <Link>, if its active?

Question

How can I disable a <Link> in react-router, if its URL already active? E.g. if my URL wouldn't change on a click on <Link> I want to prevent clicking at all or render a <span> instead of a <Link>.

The only solution which comes to my mind is using activeClassName (or activeStyle) and setting pointer-events: none;, but I'd rather like to use a solution which works in IE9 and IE10.

Answer 1

You can use CSS's pointer-events attribute. This will work with most of the browsers. For example your JS code:

class Foo extends React.Component {   render() {     return (       <Link to='/bar' className='disabled-link'>Bar</Link>     );   } } 

and CSS:

.disabled-link {   pointer-events: none; } 

Links:

• pointer-events CSS property
• How to disable HTML links

The How to disable HTML links answer attached suggested using both disabled and pointer-events: none for maximum browser-support.

a[disabled] {     pointer-events: none; } 

Link to source: How to disable Link