如何让React Card组件内的Button跳转至不同页面？

核心思路 #

通过props传递跳转配置，让Button组件具备跳转能力，同时让Card组件支持接收按钮的自定义参数，最终在页面使用时传入每个Card对应的跳转地址。

步骤1：改造Button组件，支持跳转逻辑 #

让Button能处理外部链接、内部路由，或自定义点击事件：

import { Container } from "./styles";
import { Link } from "react-router-dom"; // 用React Router做内部路由时引入

export function Button({ icon, title, to, isExternal = false, onClick }) {
  // 优先使用父组件传入的自定义点击逻辑
  if (onClick) {
    return (
      <Container type="button" onClick={onClick}>
        <span>{title}</span>
        <img src={icon} alt="" />
      </Container>
    );
  }

  // 外部链接用a标签，添加安全属性
  if (isExternal) {
    return (
      <Container as="a" href={to} target="_blank" rel="noopener noreferrer">
        <span>{title}</span>
        <img src={icon} alt="" />
      </Container>
    );
  }

  // 内部路由用React Router的Link组件
  return (
    <Container as={Link} to={to}>
      <span>{title}</span>
      <img src={icon} alt="" />
    </Container>
  );
}

步骤2：改造Card组件，支持接收按钮配置 #

根据需求选择单按钮或多按钮的实现方式：

单按钮场景

import { Button } from './Button';
import { Container } from "./styles";
import png from './path/to/png'; // 确保图标路径正确

export function Card({ img, title, desc, tags, buttonConfig }) {
  return (
    <Container>
      <img src={img} alt="preview site image" />
      <div className="tags">{tags}</div>
      <div className="cont">
        <h2>{title}</h2>
        <p>{desc}</p>
        <div className="btn">
          {buttonConfig && (
            <Button 
              title={buttonConfig.title || "Live"}
              icon={buttonConfig.icon || png}
              to={buttonConfig.to}
              isExternal={buttonConfig.isExternal}
            />
          )}
        </div>
      </div>
    </Container>
  );
}

多按钮场景（更灵活）

如果需要每个Card显示多个按钮，让Card接收按钮数组：

import { Button } from './Button';
import { Container } from "./styles";

export function Card({ img, title, desc, tags, buttons = [] }) {
  return (
    <Container>
      <img src={img} alt="preview site image" />
      <div className="tags">{tags}</div>
      <div className="cont">
        <h2>{title}</h2>
        <p>{desc}</p>
        <div className="btn-group">
          {buttons.map((btn, index) => (
            <Button 
              key={index}
              title={btn.title}
              icon={btn.icon}
              to={btn.to}
              isExternal={btn.isExternal}
              onClick={btn.onClick}
            />
          ))}
        </div>
      </div>
    </Container>
  );
}

步骤3：页面中使用Card组件 #

单按钮示例

<Card 
  img={pomodoro}
  title="番茄钟应用"
  tags="React, 工具"
  desc="专注计时的番茄钟工具"
  buttonConfig={{
    title: "Live",
    icon: png,
    to: "https://your-live-site.com",
    isExternal: true
  }}
/>

<Card 
  img={todoApp}
  title="待办清单"
  tags="Vue, 效率"
  desc="简洁的待办管理应用"
  buttonConfig={{
    title: "查看",
    icon: todoIcon,
    to: "/todo-app", // 内部路由地址
    isExternal: false
  }}
/>

多按钮示例

<Card 
  img={portfolio}
  title="个人作品集"
  tags="Next.js, UI"
  desc="我的前端作品集展示"
  buttons={[
    {
      title: "Live Demo",
      icon: liveIcon,
      to: "https://portfolio-site.com",
      isExternal: true
    },
    {
      title: "源码",
      icon: codeIcon,
      to: "https://github.com/your/repo",
      isExternal: true
    }
  ]}
/>

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