Next.js13中实现Link组件仅点击推文内容跳转的技术问询

我正在Next.js 13中开发类似Twitter的推文展示组件，需求是点击推文主体（文本内容）时跳转到对应推文详情页/[username]/status/[tweet_id]，但点击组件内的按钮等元素时不触发跳转。

当前问题 #

跳转功能可正常工作，但点击组件内的任何按钮或内容都会触发页面跳转。

目标交互效果 #

参考Twitter的交互逻辑：仅点击推文文本主体时触发跳转，点击点赞、菜单按钮等元素时不跳转。

现有代码 #

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>
  )
}

已尝试方案 #

• 调整Link组件的包裹位置
• 给InteractionComponent的容器设置position: absolute
  以上方案均未解决问题，无法精准找到解决方案，寻求帮助。

解决方案 #

方案1：仅用Link包裹推文文本区域 #

把Link组件从包裹整个推文容器，改为只包裹推文文本的<div id="post">区域，这样只有点击文本时才会触发跳转：

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;
  // 拼接正确的详情页链接
  const tweetDetailUrl = `/${tweet.authorInfo.authorUserName}/status/${tweet.id}`;

  return (
    <div className="flex flex-col hover:bg-slate/5">
      <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>
          {/* 仅用Link包裹推文文本 */}
          <Link href={tweetDetailUrl} className="text-sm font-light mb-2 cursor-pointer">
            <span>{tweet.textContent}</span>
          </Link>
          <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>
    </div>
  )
}

方案2：事件冒泡阻止（适合更大跳转区域场景） #

如果需要点击除交互按钮外的区域都跳转（比如用户信息区域也能跳转），可以给整个容器绑定点击事件跳转，同时在交互元素上阻止事件冒泡：

注意：Next.js 13中该方案需要将组件转为客户端组件，添加use client指令：

"use client"; // 添加客户端组件指令
import InteractionComponent from "./InteractionComponent";

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

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { useRouter } from "next/navigation";

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

dayjs.extend(relativeTime);

export default function PostComponent(props: { tweet: Tweet, userData: UserData }) {
  const { tweet, userData } = props;
  const router = useRouter();
  const tweetDetailUrl = `/${tweet.authorInfo.authorUserName}/status/${tweet.id}`;

  const handleContainerClick = () => {
    router.push(tweetDetailUrl);
  };

  return (
    <div 
      className="flex flex-col cursor-pointer hover:bg-slate/5"
      onClick={handleContainerClick}
    >
      <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 onClick={(e) => e.stopPropagation()}>
              <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"
            onClick={(e) => e.stopPropagation()}
          >
            <InteractionComponent tweet={tweet} userData={userData} />
          </div>
        </div>
      </div>
    </div>
  )
}

同时，需确保InteractionComponent内部的所有按钮也添加onClick={(e) => e.stopPropagation()}，防止点击按钮时触发父容器的跳转事件。

方案说明 #

• 方案1最简单直接，完全匹配你当前的需求，仅文本区域可跳转。
• 方案2适合需要扩展跳转区域的场景，需处理事件冒泡和客户端组件转换的细节。

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