NextUI Card设为isPressable后无法添加href，如何实现跳转？

问题原因 #

NextUI的Card组件默认根元素是<div>，其Props中并不包含href属性，因此直接添加href会触发TypeScript类型错误，且无法实现跳转功能。

解决方案 #

1. 外部链接跳转：将Card渲染为<a>标签（推荐，语义化） #

通过as属性将Card的根元素指定为<a>标签，即可直接使用href、target等链接属性，同时保留isPressable、isHoverable的交互效果：

<Grid>
  <Card
    isPressable
    isHoverable
    variant="bordered"
    css={{ mw: "400px" }}
    as="a"
    href="https://github.com/nextui-org/nextui"
    target="_blank" // 可选：在新标签页打开
    rel="noopener noreferrer" // 安全属性，配合target="_blank"使用
  >
    <Card.Header>First Button →</Card.Header>
    <Card.Body>Find in-depth information about Next.js features and API.</Card.Body>
  </Card>
</Grid>

2. 外部链接跳转：通过onClick事件手动处理 #

如果不想修改根元素类型，可给Card添加onClick事件实现跳转：

<Grid>
  <Card
    isPressable
    isHoverable
    variant="bordered"
    css={{ mw: "400px", cursor: "pointer" }} // 可选：添加鼠标指针样式
    onClick={() => {
      // 当前页打开
      window.location.href = "https://github.com/nextui-org/nextui";
      // 或新标签页打开
      // window.open("https://github.com/nextui-org/nextui", "_blank", "noopener noreferrer");
    }}
  >
    <Card.Header>First Button →</Card.Header>
    <Card.Body>Find in-depth information about Next.js features and API.</Card.Body>
  </Card>
</Grid>

3. 内部路由跳转：使用Next.js的Link组件（客户端导航） #

对于Next.js项目的内部页面，推荐使用官方的Link组件包裹Card，实现无刷新客户端导航。

App Router（Next.js 13+）：

import Link from 'next/link';

<Grid>
  <Link href="/about" passHref>
    <Card
      isPressable
      isHoverable
      variant="bordered"
      css={{ mw: "400px", cursor: "pointer" }}
    >
      <Card.Header>前往关于页 →</Card.Header>
      <Card.Body>通过Next.js路由导航到内部页面</Card.Body>
    </Card>
  </Link>
</Grid>

Pages Router：

用法与App Router类似，同样导入next/link的Link组件包裹Card即可。

总结 #

• 外部链接优先使用as="a"的方式，语义化且原生支持链接属性；
• 内部路由推荐使用Next.js的Link组件，享受客户端导航的性能优势。

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