Question

79

Easier way to to disable link in React?

rated 0 times [ 84] [ 5] / answers: 1 / hits: 78867 / 8 Years ago, tue, july 12, 2016, 12:00:00

I want to disable Link in some condition:

render() {

    return (<li>{this.props.canClick ? 

        <Link to=/>Test</Link> : 

        <a>Test</a>}

    </li>)  

}

<Link> must specify to, so I can not disable <Link> and I have to use <a>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blair

Add To Favorites

Follow

Total Points: 384

Total Questions: 108

Total Answers: 86

Location: Northern Ireland

Member since Tue, May 5, 2020

4 Years ago

answered 8 Years ago janjadonb · Accepted Answer

You could just set set the link's onClick property:

render () {

  return(

    <li> 

    { 

      this.props.notClickable

      ? <Link to=/ className=disabledCursor onClick={ (event) => event.preventDefault() }>Link</Link>

      : <Link to=/ className=notDisabled>Link</Link>

    }

    </li>

  );

};

Then disable the hover effect via css using the cursor property.

.disabledCursor { 

  cursor: default;

}

I think that should do the trick?