react-router-dom Link组件报错：TypeError: 赋值右侧无法解构

错误根源 #

问题出在Link组件的onClick属性赋值：onClick={props.onClick?.call}。call是函数的原型方法，它需要第一个参数作为执行上下文（this），但React触发点击事件时会把事件对象作为第一个参数传入，这就导致call接收到的参数完全不符合预期，最终抛出解构错误。

修复后的完整代码 #

import { Link } from "react-router-dom";

export type NavigationButtonProps = {
  linkTo: string;
  text: string;
  active: boolean;
  onClick?: () => void;
};

const NavigationButton = (props: NavigationButtonProps) => {
  return (
    <Link
      to={props.linkTo}
      className={props.active ? "decoration-accent underline decoration-4" : ""}
      onClick={props.onClick}
    >
      {props.text}
    </Link>
  );
};

export default NavigationButton;

额外说明 #

如果需要自定义事件参数传递（比如额外传值），可以用箭头函数包裹：

onClick={(event) => {
  // 可在此添加自定义逻辑
  props.onClick?.(event);
}}

但当前场景下，直接传递props.onClick就足够，React会自动把点击事件对象传递给回调函数。

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