How to disable a link in React?

To disable a link in React, we use some CSS styles.

For instance, we write

const C = (props) => {
  return (
    <li>
      {props.notClickable ? (
        <Link
          to="/"
          className="disabledCursor"
          onClick={(event) => event.preventDefault()}
        >
          Link
        </Link>
      ) : (
        <Link to="/" className="notDisabled">
          Link
        </Link>
      )}
    </li>
  );
};

to add Link components.

Then we event.preventDefault() to disable the default behavior when responding to clicks.

And we change the cursor when we hover over the disabled link with

.disabledCursor { 
  cursor: default;
}