How to disable a Link in React

avatar

Borislav Hadzhiev

Tue Apr 19 20222 min read

Disable a Link in React #

Set the pointer events CSS property to none to disable a Link in React, e.g. <Link style={{pointerEvents: 'none'}}>. 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> ); }

react disable link

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.

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

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 suites your use case.

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

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

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.

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
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> ); }
Use the search field on my Home Page to filter through my more than 1,000 articles.