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.
