How to Disable a React Router if it’s Active

Sometimes, we want to disable a React Router Link if it’s active.

In this article, we’ll look at how to disable a React Router Link if it’s active.

How to Disable an <Link> if it’s Active

We can disable a link by setting the pointer-events attribute in our CSS.

Since we can pass a className attribute with the CSS class to the Link , we can write:

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

We have the disabled-link class name applied to the link.

Then we can add the following CSS to disable the link:

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

Conclusion

We can disable a link by setting the pointer-events attribute in our CSS.