CODEWITHSUNDEEP
javascriptreactjshrefreact-router
roger
roger

Reputation: 9893

Easier way to to disable link in React?

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>

Upvotes: 30

Views: 100461

Answers (12)

Rushi Chudasama
Rushi Chudasama

Reputation: 19

To disable the Link component conditionally, your approach works by rendering a plain element when the Link should be disabled. However, this doesn't prevent users from interacting with it unless you add additional styling or behavior.

    render() {
    return (
        <li>
            {this.props.canClick ? (
                <Link to="/">Test</Link>
            ) : (
                <a 
                    style={{ pointerEvents: 'none', color: 'gray', cursor: 'default' }} 
                    onClick={(e) => e.preventDefault()}
                >
                    Test
                </a>
            )}
        </li>
    );
}

Upvotes: 0

Chinedu Odo
Chinedu Odo

Reputation: 54

there are many ways you can do it.

1.You can add an onClick event handler to the link and call preventDefault():

<a href="/some-link" onClick={(e) => e.preventDefault()}>Disabled Link</a>

  1. You can set the pointer-events CSS property to none to disable the link:

    <a href="/some-link" style={{ pointerEvents: 'none' }}>Disabled Link</a>

whichever you prefer

Upvotes: 0

Midhun Darvin
Midhun Darvin

Reputation: 1255

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>
    )  
}

Upvotes: 0

Awais Tahir
Awais Tahir

Reputation: 23

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

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

Upvotes: 1

Muhammad Mubashirullah Durrani
Muhammad Mubashirullah Durrani

Reputation: 1145

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>

Upvotes: 0

Milad Jafari
Milad Jafari

Reputation: 1155

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>
        )
    }
}

Upvotes: 8

Mukesh Chandra
Mukesh Chandra

Reputation: 56

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>);  
}

Upvotes: 0

Code Lover
Code Lover

Reputation: 863

In short easier way to disable link in React?

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

Upvotes: 2

Lorenz0
Lorenz0

Reputation: 376

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?

Upvotes: 36

chrismacp
chrismacp

Reputation: 3893

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>
);

Upvotes: 2

Nguy&#234;n C&#225;t Phạm
Nguy&#234;n C&#225;t Phạm

Reputation: 49

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>)  
}

Upvotes: 0

Chris
Chris

Reputation: 59491

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>)  
}

Upvotes: 15

Related Questions