Skip to content

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

How can I disable a <Link> in react-router, if its URL already active? E.g. if my URL wouldn’t change on a click on <Link> I want to prevent clicking at all or render a <span> instead of a <Link>.

The only solution which comes to my mind is using activeClassName (or activeStyle) and setting pointer-events: none;, but I’d rather like to use a solution which works in IE9 and IE10.


I’m not going to ask why you would want this behavior, but I guess you can wrap <Link /> in your own custom link component.

<MyLink to="/foo/bar" linktext="Maybe a link maybe a span" route={this.props.route} />

class MyLink extends Component {
    render () {
        if(this.props.route ==={
            return <span>{this.props.linktext}</span>
        return <Link to={}>{this.props.linktext}</Link>

(ES6, but you probably get the general idea…)