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

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