How to disable a Link in React

There are three ways to disable a link in React.

  1. Set pointerEvents curser property into none
  2. Use event.preventDefault() in onClick event handler
  3. Conditionally rendering the Link component

Set pointerEvents curser property into none

The CSS property pointer-events defines whether an element reacts to pointer events or not. If it is set to none, the associated element (button, link, etc) will do nothing on click and the link will be disabled.

Let us take an example of the below code.

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

function App() {
  	const [clickable, setClickable] = useState(true);

	
  	return (
    	<Router>
      		<div>
        		<Link style={{pointerEvents: clickable ? '' : 'none'}} to="/">
          			Home
        		</Link>
        		<button onClick={() => setClickable(!clickable)}>Toggle</button>
      		</div>
    	</Router>
  	);
}
export default App;

In this example, when a user clicks on the button, clickable the state got toggled. The pointer-events property of the Link is set to none with the help of the ternary operator clickable ? '' : 'none' and the link will be disabled. 

This can also be used for anchor tag elements because, <Link> is really an <a> tag under the hood.

Use event.preventDefault() in onClick event handler

We can use event.preventDefault() in onClick event handler to disable a link in React.

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

function App() {
	const ClickHandler = (event) => {
		event.preventDefault();
	};

	return (
		<Router>
			<div>
				<Link onClick={ClickHandler} to="/">
					Home
				</Link>
			</div>
		</Router>
	);
}
export default App;

In the above example, we are disabling a Link by calling the event.preventDefault() method in the onClick event handler function.

Conditionally rendering the Link component

We can conditionally render a link component as given below example.

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

function App() {
  	const [clickable, setClickable] = useState(true);
	
  	return (
    	<Router>
      		<div>
				{clickable ? <Link  to="/">Home</Link> : <span>Home</span>}
    
        		<button onClick={() => setClickable(!clickable)}>Toggle</button>
      		</div>
    	</Router>
  	);
}

export default App;

Here we are rendering <Link> element if state clickable is true and, rendering <span> if state clickable is false

Related Blogs

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.