Easier way to to disable link in React?

Question

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>

Welloiled

Answer 1

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?

Mixedup

Perhaps edit your answer and give an example of how to disable to hover effect in CSS if possible? This will make it easier for future new users who may not know how to do this :) – Salientian

Yeah, my bad. Here's one solution, if I'm right. :) Edited the original post. – Mixedup

This is a valid way to disable the link, but you should add the condition in your code. – Impose

I think the onClick method on your answer needs to have a parameter 'e', like, (e) => e.preventDefault() – Piscatorial

onClick={ (event) => event.preventDefault() } works for me – Oxidase

Answer 2

Your code already seems quite clean and slim. Not sure why you want an "easier" way. I'd do it exactly how you're doing it.

However, here are a few alternatives:

---

Using pointer-events

This one is probably as short and sweet as you can get it:

render() {
    return (<li>
      <Link to="/" style={this.props.canClick ? {pointerEvents: "none"} : null}>Test</Link>
    </li>)
}

---

Using onClick listener

As an alternative, you could use a generic <a> tag and add an onClick listener for the condition. This is probably better suited if you have lots of links that you want to control their state because you could use the same function on all of them.

_handleClick = () => {
  if(this.props.canClick) {
    this.context.router.push("/");
  }
}

render() {
   return (
     <li>
       <a onClick={this._handleClick}>Test</a>});
     </li>
   );  
}

The above will work assuming you are using context.router. If not, add to your class:

static contextTypes = {
  router: React.PropTypes.object
}

---

Better version of OP code

As I mentioned above, I still think your approach is the "best". You could replace the anchor tag with a span, to get rid of the styling for a disabled link (e.g pointer cursor, hover effects, etc).

render() {
    return (<li>{this.props.canClick ? 
        <Link to="/">Test</Link> : 
        <span>Test</span>}
    </li>)  
}

Impose

Answer 3

A good solution is using onClick() with event object. just do this in your jsx:

<Link to='Everything' onClick={(e) => this._onClick(e)}

and in your _onClick function:

_onClick = (e) => {
    e.preventDefault()
}

Complete Example in React:

import React, { Component } from 'react'
import {Link} from 'react-router-dom'

export default class List extends Component {
    _onClick = (e) => {
        e.preventDefault()
    }

    render(){
        return(
            <div className='link-container'>
                <Link to='Something' onClick={e => this._onClick(e)}                     
            </div>
        )
    }
}

Kendyl

Answer 4

Just making the URL null seems to do the trick:

const url = isDisabled ? null : 'http://www.stackoverflow.com';

return (
  <a href={url}>Click Me</a>
);

Unwarranted

Answer 5

In short easier way to disable link in React?

<Link to="#">Text</Link>

Intracranial

Answer 6

Use this in your link tag. I'm using it in functional component and it's working fine.

<Link style={{pointerEvents: 'none'}}>

Relume

Answer 7

I think you should you atrribute to=null to set disable a link.

<Link to=null />

Your code:

render() {
    return (<li>
        <Link to={this.props.canClick?'/goto-a-link':null} >Test</Link>
    </li>)  
}

Aposematic

This doesn't prevent the text from looking like a link. – Whisenhunt

This did not disable the link in my app. Do you have a reference link or documentation ? – Trixy

Setting a <Link={null}> brings back the following error: Warning: Failed prop type: The prop 'to' is marked as required in 'Link', but its value is 'null'. – Tommietommy

Answer 8

Passing # in to prop to the Link should do the trick for you

You can define link as per your requirement. if you want to disable it just pass # in props.link

render() {
    return (<li><Link to={props.link}>Test</Link></li>);  
}

Thurstan

Answer 9

I didn't like any of the answers. Surprisingly, if you are using bootstrap, assigning the class disabled will make the link inactive. So, no need to change the path to # or anything.

<Link to='something/else' className='nav-link disabled'>Transactions Detail</Link>

Accompany

Answer 10

You can conditionally set the to prop of the Link component. When you set it to #, the link would be disabled.

render() {
    return (
      <li>
        {
          <Link to={`${this.props.canClick ? '/' : '#'}`}>Test</Link>
        }
      </li>
    )  
}

Sabec