如何在React中为history.goBack定义正确的TS接口 替换any类型

解决方案 #

你只需要把IGoBackLinkProps里的onGoBackClick的any类型替换为对应的事件处理函数类型即可，可根据使用场景二选一： #

场景1：不需要访问点击事件对象（你当前的用法直接适用）

你现在传入的回调是无参数、无返回值的history.goBack()执行逻辑，直接用无参空返回函数类型即可：

// GoBackLink.tsx
interface IGoBackLinkProps {
  text: string;
  // 替换原有any类型
  onGoBackClick: () => void;
}

const GoBackLink: React.FC<IGoBackLinkProps> = ({ text, onGoBackClick }) => {
  return (
    <Link className={styles.link} to='/' onClick={onGoBackClick}>
      {text}
    </Link>
  );
};

export default GoBackLink;

场景2：需要在回调中访问事件对象

如果后续你需要在onGoBackClick中调用事件对象的方法（比如e.preventDefault()取消Link默认跳转行为、e.stopPropagation()阻止冒泡），就用React提供的锚元素鼠标事件处理类型：

// GoBackLink.tsx
interface IGoBackLinkProps {
  text: string;
  // 替换原有any类型
  onGoBackClick: React.MouseEventHandler<HTMLAnchorElement>;
}

// Page404 中如果要阻止默认跳转，回调可以这么写
<GoBackLink 
  text={'Назад'} 
  onGoBackClick={(e) => {
    e.preventDefault();
    history.goBack();
  }} 
/>

补充说明

你当前Page404组件用的React.FC<RouteComponentProps>是react-router-dom v5的标准正确类型，会自动推导history对象的所有属性和方法类型，不需要额外修改。如果后续升级到react-router-dom v6，已经移除了RouteComponentProps，可以用useNavigate钩子实现返回逻辑，写法参考：

// react-router-dom v6 写法示例
import { useNavigate } from 'react-router-dom';
const Page404 = () => {
  const navigate = useNavigate();
  return (
    <section className={styles.section}>
      <GoBackLink text={'Назад'} onGoBackClick={() => navigate(-1)} />
    </section>
  )
}

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