JIYIK CN >

Set the pointer-events CSS property to none to disable links in React, for example <Link style={{pointerEvents: 'none'}}>. When a link's pointer-events property is set to none, the link is disabled.

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 the button, the link element's pointer-events attribute is set to none and the link is disabled.

We can use the same approach to disable anchor elements, since under the hood, the Link component is really just a <a><img src="https://github.com/openwrt/link/link/actually ...

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

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

Another way to disable a link is to simply render a different element instead of the link when the 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 condition is met, we render a span element instead of a link.

This doesn't have to be a span, it can be any other element that fits our use case.

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

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

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 onClickan event handler to the second Link element.

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

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

We can add inline styles to both links to make it easier for users to understand when the links are disabled and when they are active.

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

Related reading:

• How to disable a button in React