React 组件按钮转到不同页面

Question

我试图让这个按钮组件导航到不同的网页。会有几个按钮，但我无法让每个按钮导航到不同的页面。

我有一个转到卡片组件的按钮组件，而卡片组件则转到页面。

让卡片中的每个按钮转到网络上的不同页面的最佳方法是什么？

下面是按钮组件

import { Container } from "./styles";

export function Button({ icon, title}){
    return (
        <Container type="button">
            <span>{title}</span>
            <img src={icon} />
        </Container>
    )
}

这是卡片组件

export function Card({img, title,desc,tags}){
    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">
                    <Button 
                        title= {"Live"}
                        icon= {png}
                    />
                    
                </div>
            </div>
            
        </Container>
    )
}

现在页面上的组件

   <Card 
       img={pomodoro}
       title={""}
       tags={""}
       desc={""}
    />

Answer 1

您使用 Next.js 吗？如果是这样，我建议使用他们的Link组件。

您可以简单地将

<Button>

组件包装在

<Link>

中，并将 href 属性传递给它，如下所示：

import Link from "next/link";
import { Container } from "./styles";

export function Button({ icon, title, href }) {
  return (
    <Link href={href}>
      <Container type="button">
        <span>{title}</span>
        <img src={icon} />
      </Container>
    </Link>
  );
}