Next.js Link元素中preventDefault的正确类型问题

你遇到的问题是事件类型使用错误，以下是两种可行的解决方式：

方式一：直接指定事件对象的类型 #

从React导入封装的MouseEvent类型（或直接使用React.MouseEvent），作为事件参数的类型：

import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { MouseEvent } from 'react';

export default function YourComponent() {
  const router = useRouter();

  const handleBackward = (event: MouseEvent<HTMLAnchorElement>) => {
    if (history.length > 1) {
      event.preventDefault();
      router.back();
    }
  };

  return (
    <Link href="/" onClick={handleBackward}>Listing</Link>
  );
}

方式二：指定事件处理函数的类型 #

使用MouseEventHandler定义整个处理函数的类型，TypeScript会自动推断事件对象的类型：

import Link from 'next/link';
import { useRouter } from 'next/router';
import { MouseEventHandler } from 'react';

export default function YourComponent() {
  const router = useRouter();

  const handleBackward: MouseEventHandler<HTMLAnchorElement> = (event) => {
    if (history.length > 1) {
      event.preventDefault();
      router.back();
    }
  };

  return (
    <Link href="/" onClick={handleBackward}>Listing</Link>
  );
}

错误原因说明 #

• 你尝试的MouseEvent<HTMLAnchorElement, MouseEvent>错误，是因为使用了DOM原生的MouseEvent而非React封装的React.MouseEvent，原生MouseEvent不是泛型类型。
• 用MouseEventHandler<HTMLAnchorElement>作为事件对象的类型也不对，因为它是事件处理函数本身的类型，不是事件对象的类型，自然找不到preventDefault方法。

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