Last updated: Apr 6, 2024
Reading time·3 min
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.
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
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.
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.
If you need to disable a button in React, check out the following article.
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.
If you need to change the color of a link, check out the following article.
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.
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> ); }
I've also written an article on how to remove the underline from a link.