CODEWITHSUNDEEP
reactjshyperlink
Loren
Loren

Reputation: 59

How to disable click on react-router-dom <Link> on condition

In my React app I have this line wherein I have to restrict clicking on the Link in case id is less than 1. How can I do this?

import { Link } from 'react-router-dom';

<Link to={`/edit/${id - 1}`}>Prev</Link>

Upvotes: 2

Views: 2715

Answers (1)

Charles Kornoelje
Charles Kornoelje

Reputation: 805

Your question is missing some key points, but I am assuming that id is a route parameter.

There are two ways to do this. Either, add a custom onClick handler that prevents clicking, or create a CSS class that has the rule pointer-events: none; and apply that to the <Link />. You can use the two together.

import { Link, useParams } from 'react-router-dom';

const myLink = () => {
  const { id } = useParams();

  const handleClick = (e) => {
    e.preventDefault();
  }

  return (
    <Link to={`/edit/${id - 1}`} onClick={id - 1 < 0 && this.handleClick}>Prev</Link>
  );

};

Reference this GitHub issue comment for more information.

Upvotes: 1

Related Questions