如何在Link标签中实现条件渲染且避免URL异常与页面刷新？

方案1：条件渲染不同元素 #

当disabled为true时，渲染一个样式与Link一致的普通文本元素（比如<span>），而非可导航的Link组件，彻底规避href带来的路径问题：

export const CartBottomNavigator: FC<Props> = ({ disabled }) => (
  <BottomNavigator borderStyle="dashed">
    <Button fill disabled={disabled}>
      {disabled ? (
        <span className={styles.link}>Select Date</span>
      ) : (
        <Link className={styles.link} href="availability">
          Select Date
        </Link>
      )}
    </Button>
  </BottomNavigator>
);

方案2：阻止Link的点击事件 #

保留Link组件，但在disabled状态下阻止其默认导航行为，href可固定为目标路径（反正点击会被拦截）：

export const CartBottomNavigator: FC<Props> = ({ disabled }) => {
  const handleLinkClick = (e: React.MouseEvent) => {
    if (disabled) {
      e.preventDefault();
      e.stopPropagation();
    }
  };

  return (
    <BottomNavigator borderStyle="dashed">
      <Button fill disabled={disabled}>
        <Link 
          className={styles.link} 
          href="availability"
          onClick={handleLinkClick}
        >
          Select Date
        </Link>
      </Button>
    </BottomNavigator>
  );
};

方案3：用useNavigate手动控制导航（React Router v6+） #

抛弃Link组件，结合React Router的useNavigate钩子，通过按钮点击事件手动控制导航逻辑，同时利用Button的disabled状态直接阻止交互：

import { useNavigate } from 'react-router-dom';

export const CartBottomNavigator: FC<Props> = ({ disabled }) => {
  const navigate = useNavigate();

  const handleNavigate = () => {
    if (!disabled) {
      navigate('availability');
    }
  };

  return (
    <BottomNavigator borderStyle="dashed">
      <Button 
        fill 
        disabled={disabled}
        onClick={handleNavigate}
        className={styles.link}
      >
        Select Date
      </Button>
    </BottomNavigator>
  );
};

内容的提问来源于stack exchange，提问作者Ashwin Thomas