How to disable a Link in React

# 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

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

react disable link

The code for this article is available on GitHub

When the user clicks on the button, the pointer-events 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.

App.js

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

react disable link by showing different element

The code for this article is available on GitHub

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.

If you need to disable a button in React, check out the following article.

# 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.

App.js

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

disable link event prevent default

The code for this article is available on GitHub

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.

If you need to change the color of a link, check out the following article.

# Adding inline styles to the Disabled link

You can add inline styles to the two links to make it easier for the user to know when the link is disabled and when it's active.

App.js

Copied!
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
            style={{pointerEvents: 'none', textDecoration: 'none'}}
            to="/about"
            onClick={event => event.preventDefault()}
          >
            About
          </Link>
        )}

        <br />
        <br />

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

adding inline styles to the disabled link

The code for this article is available on GitHub

I've also written an article on how to remove the underline from a link.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to disable a Link in React

# Disable a Link in React

# Disable a Link by rendering a different element

# Disable a Link using event.preventDefault

# Adding inline styles to the Disabled link

Borislav Hadzhiev

# Disable a Link using `event.preventDefault`