收到“<a> cannot appear as a descendant of <a>.” 错误，但不太确定如何构建我的代码以避免此警告

您可以模拟嵌套链接的点击行为，而不是使用原生标记。显然，除非有必要（在您的情况下），否则不鼓励这样做。<a>

import { useNavigate } from "react-router-dom";

/* ... */

const navigate = useNavigate();
const communityHref = `/c/${community?.id}`;

return (
  <NavLink to={`/posts/${post.id}`}>
    <SinglePost>
      <div>
        <SinglePostAuthorBar>
          <div>
            <span
              onClick={(e) => {
                // prevent parent link from triggering
                e.stopPropagation(); 
                e.preventDefault();
                navigate(communityHref);
              }}
              data-href={communityHref}
              tabIndex={0}
              role="link"
            >
              c/{community?.name}
            </span>
          </div>
        </SinglePostAuthorBar>
      </div>
    </SinglePost>
  </NavLink>
);

tl;dr 将外部 <NavLink /> 更改为 <div onClick={router.push（nextPage）} />

关于Reddit等逆向工程网站的一些提示

在 Reddit 中，该帖子是一个带有处理程序的帖子。您可以在基于 Google Chrome / Chromium 的浏览器中按如下方式进行验证（截至 2023 年 7 月 21 日）。<div>onClick

1. 右键单击 post -> Inspect Element，然后向上移动，直到找到似乎负责单击处理程序的元素（即包含它的元素不会链接到下一页）。对此有帮助的是右键单击元素并“存储为全局变量” 在 JavaScript 控制台中，然后调用 .temp1.click()
   • 截至 2023 年 7 月 21 日，这是 with（用于 testing-library 或 Puppeteer 之类的东西）。您可以使用“元素”选项卡中的 Ctrl-F 快速跳转到其中之一。<div />data-testid="post-container"
2. 我们已经有足够的证据表明它是链接，但我们可以更进一步查看“事件侦听器”选项卡，在那里我们可以删除所有点击处理程序并验证不再响应。我们甚至可以弄清楚哪个处理程序专门负责响应。<div /><div />.click().click()