Blocking Link Component With Conditional Rendering In Remix
Block Link component with condition? Use ternary to render disabled button or Link, abstract into reusable component. Pattern used at Seasoned many times!
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>
)...