# Disable a Link in React

Set the pointer-events CSS property to none to disable a Link in React.

When the pointer-events property of the link is set to none, the link is disabled.

App.js

import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <Router>
      <div>
        <Link style={{pointerEvents: count === 0 ? '' : 'none'}} to="/">
          Home
        </Link>

        <br />
        <br />

        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </Router>
  );
}

When the user clicks on the button, the property of the link element is set to none and the link is disabled.

You can use the same approach to disable an anchor element, because under the hood the Link component is really just an <a> tag.

The example uses a ternary operator, which is very similar to an if/else statement.

If the value to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise, the value to the right of the colon is returned.

# Disable a Link by rendering a different element

An alternative approach to disable a link is to simply render a different element instead of the link if a condition is met.

import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <Router>
      <div>
        {count === 0 ? (
          <Link to="/">
            Home
          </Link>
        ) : (
          <span>Home</span>
        )}

        <br />
        <br />

        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </Router>
  );
}

This time, if a certain condition is met, we render a span element instead of a link.

This doesn't have to be a span, it could be any other element that suits your use case.

This example uses the ternary operator as well - if the count variable is equal to 0, we render a link, otherwise, render a span tag.

# Disable a Link using event.preventDefault

Alternatively, you can disable the link by adding an onClick prop to the element and calling the preventDefault() method on the event object.

import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <Router>
      <div>
        {count === 0 ? (
          <Link to="/about">About</Link>
        ) : (
          <Link to="/about" onClick={event => event.preventDefault()}>
            About
          </Link>
        )}

        <br />
        <br />

        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </Router>
  );
}

We added an onClick event handler to the second Link element.

The preventDefault method on the event object tells the browser that its default action should not be taken.

The default action when clicking on a link is to navigate to a different page. By calling preventDefault(), the link is disabled.