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

This works for me:

<Link to={isActive ? '/link-to-route' : '#'} />

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:

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

Related