How to disable a link in React Router 7 / 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> ) } 

Enjoy!