React可复用Button组件添加href报错，如何按需配置跳转？

核心问题分析 #

1. 原生<button>标签本身不支持href属性，TypeScript抛出类型错误是正常的类型校验行为。
2. 用Next.js的Link包裹按钮实现跳转是正确方案，但当前组件强制要求所有实例传入href，违背了复用性需求——仅需跳转按钮传该属性。

解决方案 #

调整组件的Props定义和内部渲染逻辑，让href成为可选属性，并根据是否传入该属性渲染不同结构：

1. 定义可选的Props类型

import Link from 'next/link';
import { ButtonHTMLAttributes } from 'react';

// 扩展原生button属性，将href设为可选
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  href?: string;
};

2. 组件内部条件渲染

export default function Button({ href, children, ...rest }: ButtonProps) {
  // 存在href时，用Link包裹按钮实现跳转
  if (href) {
    return (
      <Link href={href}>
        <button {...rest}>{children}</button>
      </Link>
    );
  }
  // 无href时，渲染普通按钮
  return <button {...rest}>{children}</button>;
}

3. 使用示例

• 普通按钮（无需传href）：

<Button onClick={() => console.log('触发普通操作')}>普通按钮</Button>

• 跳转按钮（传入href）：

<Button href="/register">前往注册页</Button>

补充说明 #

• 若使用Next.js 13+ App Router，Link组件直接包裹按钮即可，无需额外配置passHref（旧版本Pages Router可能需要，根据你的版本调整）。
• 这种方式既保留了组件复用性，又满足了部分按钮的跳转需求，同时通过TypeScript保证了类型安全。

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