نحوه غیرفعال کردن پیوند در React Router 7 / Remix

امروز، من به بحثی در مورد Remix Discord در مورد نحوه مسدود کردن a پیوستم Link جزء زمانی که یک شرط خاص صادق است.

یک راه حل ساده این است که از یک سه تایی برای رندر کردن هر دو استفاده کنید Link یا یک دکمه غیرفعال که استایلی شبیه به هم دارد. می توانید آن را به یک جزء قابل استفاده مجدد انتزاع کنید. من بارها از این الگو در Seasoned استفاده کردم 😁

{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>
)
}

لذت ببرید!