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

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

How to disable a Link if it’s active in React Router?

To disable a Link if it’s active in React Router, we set the to path of the Link‘s pointer-events CSS property to none.

For instance, we write

<Link to="/bar" className="disabled-link">
  Bar
</Link>

to add the disabled-link class to the Link.

And we set the disabled-link class’ CSS by writing

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

to disable the mouse pointer we usually see over a link with pointer-events with none.

Conclusion

To disable a Link if it’s active in React Router, we set the to path of the Link‘s pointer-events CSS property to none.