React可复用Button组件嵌套Link路由样式异常问题求助

我有一个可复用的React Button组件，想给其中一个按钮加路由跳转功能。直接把<Link>嵌套在Button里面的话，按钮的CSS样式会失效，尺寸变小；如果只把Link包在按钮文本外面，功能是正常，但只有点击文本区域才能跳转，用户体验很差。

原Button组件代码 #

import React from 'react';

type ButtonProps = {
  style: React.CSSProperties;
  children: React.ReactNode;
};

function MouseOver(event: any) {
  event.target.style.opacity = '90%'
}
function MouseOut(event: any) {
  event.target.style.opacity = ''
}

function Button({ style, children }: ButtonProps) {
  return (
    <button
      onMouseOver={MouseOver}
      onMouseOut={MouseOut}
      style={style}
    >
      {children}
    </button>
  )
}

export default Button;

原复用示例 #

<Button
  key={id}
  style={{
    backgroundColor: 'green',
    color: 'white',
    fontSize: '1.6rem',
    borderRadius: '4px',
    border: 'none',
    display: 'block',
    padding: '1rem',
    cursor: 'pointer',
    fontFamily: "Roboto, sans-serif",
    transition: 'all 0.3s'
  }}
>
  Create your account
</Button>

方案1：让Button组件支持自定义根元素（推荐） #

修改Button组件，允许传入as属性指定根元素类型（比如Link），同时修正hover事件的目标元素，避免子元素干扰。

修改后的Button组件：

import React from 'react';
import { Link } from 'react-router-dom';

type ButtonProps = {
  style: React.CSSProperties;
  children: React.ReactNode;
  as?: React.ElementType; // 支持自定义根元素
  to?: string; // 路由跳转地址（当as为Link时需要）
};

function MouseOver(event: React.MouseEvent) {
  event.currentTarget.style.opacity = '90%' // 用currentTarget确保指向按钮容器
}
function MouseOut(event: React.MouseEvent) {
  event.currentTarget.style.opacity = ''
}

function Button({ style, children, as: Component = 'button', to }: ButtonProps) {
  // 根据根元素类型传递对应属性
  const elementProps = Component === Link ? { to } : {};
  
  return (
    <Component
      onMouseOver={MouseOver}
      onMouseOut={MouseOut}
      style={style}
      {...elementProps}
    >
      {children}
    </Component>
  )
}

export default Button;

使用方式：

// 普通按钮保持不变
<Button
  key={id}
  style={{ /* 原样式 */ }}
>
  Create your account
</Button>

// 带路由跳转的按钮
<Button
  as={Link}
  to="/signup"
  key={id}
  style={{ /* 原样式 */ }}
>
  Create your account
</Button>

方案2：用useNavigate钩子实现跳转（无需修改Button组件） #

如果不想改动原Button组件，直接给按钮添加onClick事件，通过useNavigate触发路由跳转，整个按钮区域都能响应点击。

import { useNavigate } from 'react-router-dom';

// 在使用Button的组件中
const navigate = useNavigate();

// 使用带跳转的按钮
<Button
  key={id}
  style={{ /* 原样式 */ }}
  onClick={() => navigate('/signup')}
>
  Create your account
</Button>

方案3：让Link占满整个按钮容器（嵌套方式） #

如果一定要用嵌套Link的写法，通过绝对定位让Link覆盖整个按钮区域，实现全区域可点击。

<Button
  key={id}
  style={{
    /* 原样式 */
    position: 'relative' // 新增相对定位
  }}
>
  <Link 
    to="/signup"
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'inherit',
      textDecoration: 'none'
    }}
  >
    Create your account
  </Link>
</Button>

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