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:
- 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