disable Link component

[quant-daddy]

Is there a way to disable the Link component? I thought if href is #, it would disable the Link component. However, very surprisingly, the actual link in this becomes the pathname of the current page and it leads on a runtime error on click the link.

[lednhatkhanh]

I also want to disable Next.js link but still show the url.

[skfahad]

I passed empty object in href attribute of Link component then on click of child anchor element called the preventDefault() method as follows

<Link href={conditionMet ? '/some-path' : {}}>
    <a onClick={(event) => !conditionMet ? event.preventDefault() : null}>
        Some Link
    </a>
</Link>

[xyfll7]

<Link href={"/test"} scroll={false} onClick={(e) => { e.preventDefault()  }}>
                test
</Link>

[OFD16]

you are amayzing bro thanks a lot @xyfll7

[vikaskrsharma]

Not sure the seo side effects but this definitely solved all the problems.

[hossein-deyri]

this is good

[saurabhburade]

You can create a wrapper component for the Link to disable it conditionally like following

const LinkWrapper = ({ href, ...props }) => {
  if (href == "#") {
    return <button {...props}>Click Here</button>;
  }
  return (
    <Link href={href} {...props}>
      <button>Click Here</button>
    </Link>
  );
};

[devlopersabbir]

this is a good way???

[camposdev]

I just changed the as prop to div, so the href does not work in a div or another element like button:

<Link href={href} as={isDisabled ? 'div' : 'a'} />

[romoore]

This just changed the browser bar URL, it didn't change the component type.

[devlopersabbir]

as work as like href 🐸

[sahilsian]

This suggestion is a little bit hacky, and only works in some scenarios but I just change styling if a value is passed through href. Just to make it seem like links are not clickable, and if they do they are just sent to the top of the page.

<Link style={{
    textDecoration: href ? "underline" : "none",
    cursor: href ? "pointer" : "default"
}}  href={href ? href : {}}>
    <Text_Component
        font_size={font_size}
        line_height={line_height}
        font_weight={font_weight}
        color={color}
        text={text}
        align={align}
        hover={href}
    >
    </Text_Component>
</Link>

Of course this is not the best way and the best way would be to return a different element if href is not passed. But that was already mentioned by @saurabhburade comment, and this also works fine for me.

[CapitaineToinon]

Yeah I wrote something like this for a shadcn button / link that can be disabled

type PaginationButtonProps =
	| (ComponentProps<typeof Link> & { disabled?: false })
	| (ComponentPropsWithoutRef<'button'> & { disabled: true })

function PaginationButton(props: PaginationButtonProps) {
	if (props.disabled) {
		const { disabled, ...rest } = props
		return (
			<Button disabled={disabled} asChild>
				<button {...rest} />
			</Button>
		)
	}

	return (
		<Button asChild>
			<Link {...props} />
		</Button>
	)
}

Used like this for example:

<ButtonGroup>
	<PaginationButton
		href={`?page=${page - 1}`}
		disabled={isFirstPage}
	>
		Previous
	</PaginationButton>
	<PaginationButton
		href={`?page=${page + 1}`}
		disabled={isLastPage}
	>
		Next
	</PaginationButton>
</ButtonGroup>

[devlopersabbir]

Thanks you so much, this is the one of the best solutions :)

[owencraston]

This is it 👍

[akomm]

Using css:

a.disabled {
  pointer-events: none;
}

Then component:

<Link className={clsx(p.disabled && "disabled")} aria-disabled={p.disabled}>...</Link>

Alt using tailwind utilities:

<Link className={clsx(p.disabled && "pointer-events-none")} aria-disabled={p.disabled}>...</Link>

Alt. using style:

<Link style={{pointerEvents: "none"}} aria-disabled={p.disabled}>...</Link>

aria-disabled is for accessibility.

[FedericoMainettiGambera]

To also disable keyboard navigation: tabIndex={disabled ? -1 : undefined}

[akomm]

good point

[tayejoseph]

using pointer-events: none on the css end will prevent cursor: no-drop from working

[akomm]

Yes. Then you need to use another solution or wrap the element in another element that has a cursor set.
May I add thought that using cursor as an indicator for that is either redundant, if the element has already a clear formatting depicting it as disabled or in case it is not otherwise depicted as disabled the disabled state isn't accessible/depictable on devices without a cursor.

So typically you should not do that, but I get that maybe you have some older app that still uses this technique or you have someone who wants it and does not want to talk about this matter, then you can only use JS solution or a wrapper element (which you can render only when disabled). But that is also not very nice for accessibility without extra effort.

[yigithancolak]

Update:
In my situation i used the existing pathname with usePathname() and change the pointer events and opacity according to it. Simply if i am already in that route, link will have a disable effect with tailwind classes.

<Link
              key={title}
              href={route}
              className={`btn-primary flex items-center ${
                pathname === route && 'pointer-events-none opacity-20'
              }`}
            >
              <span className='hidden md:inline mr-1'>{title}</span>
              <button.icon className='inline' fontSize={20} />
            </Link>

[CapitaineToinon]

You should do that if you care about your links behaving normally. You solution disables next's prefetch on hover, the native bahvior of opening links in a new tab my middle clicking without the scroll wheel and more.

[yigithancolak]

Yes you re right. Wish they had direct way to do it but links are not treated as button element, they are more like a element so some extra effort needed for sure.

[angelitolm]

My solution:

interface LinkWrapperProps {
  href: string;
  disabled?: boolean;
  children?: any;
  passHref?: boolean;
  className?: string;
}

const LinkWrapper = ({ children, href, disabled, passHref, ...props }: LinkWrapperProps) => {
  if (disabled)
    return <Button disabled={disabled} {...props}>{children}</Button>;

  return <Link href={href} passHref={passHref} {...props}>{children}</Link>;
};

Use mode:

<LinkWrapper href={href} passHref className='flex gap-1' disabled={!isAvailable(href)}>
  {icon}
  <Trans i18nKey={`navigation:tabs.${label}`} components={{ i: <i />, br: <br /> }} />
</LinkWrapper>

[vasilemidrigan]

Is there a way to disable the Link component? I thought if href is #, it would disable the Link component. However, very surprisingly, the actual link in this becomes the pathname of the current page and it leads on a runtime error on click the link.

Maybe as a solution:

<button disabled>
    <Link key={v4()} href={`?page=${pageIndex}`}>
        {pageIndex}
    </Link>
</button>

[akomm]

accessibility

[MeroCallys]

This works for me.

 <Link
                              href={condition ? `/orders/${order.id}` : "#"}
                              className={clsx(
                                " hover:text-gray-400",
                                {
                                  "text-gray-400 pointer-events-none":
                                    !disabled[1] ? true : false,
                                },
                                {
                                  "text-gray-500": condition ? true : false,
                                }
                              )}
                            >
                              <ArrowUpRightSquare size={20} />
                            </Link>
                          </>

[Hammadhammad2]

we can use e.Preventdefault() and can apply condition to diable the link on onClicking event.

{ if (loading) e.preventDefault(); }} > Forgot Password?

[austinschrader]

Why is this so hard

[amanzrx4]

just nextjs things

[jtmuller5]

You can use Tailwind to conditionally ignore pointer event:

<Link
          href={`/booking/preferences?zip=${zip}`}
          className={`${disabled ? 'pointer-events-none': ''}`}
        >
          <button className="w-full">Search</button>
</Link>

[akomm]

#21396 (comment)

[KhanhLe1306]

Try pointerEvents , it disables the link

 <Link
       href={`/yourLink`}
       style={{
              textDecoration: 'none',
              pointerEvents: yourCondition ? 'auto' : 'none'
                }}
       key={...}
       target="_blank"
>
       <OtherComponent />
</Link>

[akomm]

The answer is just above yours linked ;P
#21396 (comment)

[derb3n]

  <Button disabled={disabled} asChild={!disabled}>
    <Link href={'/home'}>Home</Link>
  </Button>

works for me with the shadcn button