Html 如何使链接组件内的内容不重新路由Next.js13

我正在try 构建一个类似于Twitter如何在Next.js13中显示推文的组件，一旦点击，将指向该推文的Post-Page:/[username]/status/[tweet_id].我希望它只在你点击帖子本身时调用链接，而不是当你用任何按钮或推文中的内容点击时(除非点击的内容是文本).

My problem:

我可以让重定向正常工作，但由于某些原因，当您单击组件中的任何按钮或内容时，它仍会重定向.

What I'm trying to mimic:个

以下是Twitter在点击推文内的按钮与点击帖子本身时的react :

点击点赞按钮不会重定向，但点击帖子本身会重定向.这就是我想要的.

My code:个

import InteractionComponent from "./InteractionComponent";

import { BsDot, BsThreeDots } from "react-icons/bs";

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import Link from "next/link";

import type { Tweet } from "@/lib/types/tweet.types";
import type { UserData } from "@/lib/types/userdata.types";

dayjs.extend(relativeTime);

export default async function PostComponent(props: { tweet: Tweet, userData: UserData }) {
  const { tweet, userData } = props;

  return (
    <div className="flex flex-col cursor-pointer hover:bg-slate/5">
      <Link href="/">
        <div className="flex flex-row border-b-2 p-4 border-slate/25">
          <div className="mr-3">
            <div className="h-[40px] w-[40px] bg-slate rounded-full"></div>
          </div>
          <div className="flex flex-col w-full">
            <div className="flex flex-row justify-between w-full">
              <div className="flex flex-row text-sm justify-between">
                <span className="font-bold">{tweet.authorInfo.authorDisplayName}</span>
                <div className="flex flex-row ml-2 font-light">
                  <span className="text-slate/75">@{tweet.authorInfo.authorUserName}</span>
                  <BsDot className="h-full text-slate/75" />
                  <span className="text-slate/75">{dayjs(tweet.createdAt).fromNow()}</span>
                </div>
              </div>
              <div>
                <BsThreeDots className="h-full text-slate/75" />
              </div>
            </div>
            <div id="post" className="text-sm font-light mb-2">
              <span>{tweet.textContent}</span>
            </div>
            <div className="flex flex-row text-slate/75 text-lg mt-2 justify-between w-full z-10">
              <InteractionComponent tweet={tweet} userData={userData} />
            </div>
          </div>
        </div>
      </Link>
    </div>
  )
}

What I already tried:个

我试着移动<Link>组件，但似乎不起作用.我甚至试着在<InteractionComponent />的div上使用position: absolute，看看我是否能以某种方式越过链接(作为最后的努力)，但这也没有起到作用……我甚至用谷歌搜索了这个问题，但我甚至不知道到底要用什么谷歌才能找到解决方案.我们非常感谢您的帮助，非常感谢！