How to disable a link in React Router 7 / Remix

#react #reactrouter #remix

Today, I joined a discussion on the Remix Discord about how to block a Link component when a certain condition is true.

A simple solution is to use a ternary to render either the Link or a disabled button styled to look identical. You can abstract it into a reusable component. I've used this pattern at Seasoned many times 😁

{disabled ? (
  <button
    className="bt bt-blue" // add the disabled appearance as needed
    disabled={disabled}
  >
    <CheckIcon /> Go!
  </button>
) : (
  <Link
    to={`....`}
    className="bt bt-blue"
    preventScrollReset
  >
    <CheckIcon /> Go!
  </Link>
)
}