React Router中history.goBack在iOS设备不生效如何解决？

故障根因 #

你的代码同时为Link组件绑定了两个冲突的跳转逻辑：Link自带的默认跳转（跳转至to属性指定的/路径）和onClick事件触发的history.goBack()回退逻辑。iOS Safari的事件执行顺序、默认行为处理规则与PC/Android浏览器不同，会导致history.goBack()的历史栈操作被Link的默认跳转行为覆盖，最终回退功能失效，该问题和useParams无关。

另外你现有代码中useParams的使用存在语法错误，正确写法为const {id} = useParams()，缺失的调用括号会导致你无法正常拿到路由参数。

修复方案 #

方案1：保留Link组件，阻止默认跳转 #

如果需要保留Link的链接语义（支持右键新开标签、SEO抓取等），修改点击事件阻止默认跳转即可：

interface IGoBackLinkProps {
  text: string;
}

const GoBackLink: React.FC<IGoBackLinkProps> = ({ text }) => {
  const history = useHistory();

  return (
    <Link 
      className={styles.link} 
      to='/' 
      onClick={(e) => {
        // 阻止Link默认跳转到根路径的行为
        e.preventDefault();
        history.goBack();
      }}
    >
      {text}
    </Link>
  );
};

export default GoBackLink;

方案2：替换Link为普通元素 #

如果不需要Link的原生链接特性，直接用普通块级元素绑定点击事件，彻底避免逻辑冲突：

interface IGoBackLinkProps {
  text: string;
}

const GoBackLink: React.FC<IGoBackLinkProps> = ({ text }) => {
  const history = useHistory();

  return (
    <div className={styles.link} onClick={() => history.goBack()}>
      {text}
    </div>
  );
};

export default GoBackLink;

边界兼容优化 #

新增历史栈长度判断，避免用户直接打开当前页面时，回退操作跳转到浏览器外部页面：

onClick={() => {
  if (window.history.length > 1) {
    history.goBack();
  } else {
    // 没有上一页时兜底跳转到根路径
    history.push('/');
  }
}}

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