DEV Community

Felipe Freitag Vargas for Seasoned

Posted on

2 1

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>
)
}
Enter fullscreen mode Exit fullscreen mode

Enjoy!

Top comments (0)

nextjs tutorial video

📺 Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay