解决<a>不能作为<a>后代的React NavLink嵌套警告问题

问题的核心是HTML规范禁止<a>标签嵌套，所以必须重构结构，同时保留两个跳转功能的交互逻辑。下面是两种合规且可维护的解决方案：

方案一：手动处理外层跳转+阻止事件冒泡 #

这种方案适合需要整个帖子卡片（除社区名外）都能触发帖子详情跳转的场景，同时保留社区链接的语义化和路由状态：

import { NavLink, useNavigate, useLocation } from 'react-router-dom';

const YourComponent = ({ post, community }) => {
  const navigate = useNavigate();
  const location = useLocation();

  // 处理帖子卡片的点击跳转
  const handlePostClick = () => {
    navigate(`/posts/${post.id}`);
  };

  // 阻止社区链接的事件冒泡，避免触发外层跳转
  const handleCommunityClick = (e) => {
    e.stopPropagation();
  };

  // 可选：手动判断是否为当前帖子页，添加高亮样式（替代原外层NavLink的active状态）
  const isPostActive = location.pathname === `/posts/${post.id}`;

  return (
    <div 
      onClick={handlePostClick}
      className={`single-post-card ${isPostActive ? 'active' : ''}`}
      style={{ cursor: 'pointer' }}
    >
      <SinglePost>
        <div>
          <SinglePostAuthorBar>
            <div>
              <NavLink 
                to={`/c/${community?.id}`}
                onClick={handleCommunityClick}
              >
                c/{community?.name}
              </NavLink>
            </div>
          </SinglePostAuthorBar>
          {/* 帖子的标题、内容、投票组件等 */}
        </div>
      </SinglePost>
    </div>
  );
};

关键细节： #

• 外层用div替代原NavLink，通过useNavigate钩子手动触发路由跳转，彻底避免嵌套<a>标签
• 内层NavLink保留，维持其语义化和路由active状态（比如当前社区页时高亮），同时通过e.stopPropagation()阻止点击事件冒泡到外层容器
• 手动添加cursor: 'pointer'模拟链接的可点击交互，提升用户体验
• 如果需要原外层NavLink的active高亮效果，可通过useLocation判断当前路由，手动添加类名

方案二：拆分跳转区域（兄弟节点布局） #

如果设计允许，可以将帖子的跳转区域与社区链接区域拆分为兄弟节点，完全规避嵌套问题：

import { NavLink } from 'react-router-dom';

const YourComponent = ({ post, community }) => {
  return (
    <div className="single-post-container">
      {/* 帖子主体区域：点击跳转详情 */}
      <NavLink to={`/posts/${post.id}`} className="post-main-content">
        <SinglePost>
          <div>
            {/* 帖子标题、内容、投票组件等 */}
          </div>
        </SinglePost>
      </NavLink>
      {/* 作者栏区域：单独放置社区链接 */}
      <SinglePostAuthorBar>
        <div>
          <NavLink to={`/c/${community?.id}`}>
            c/{community?.name}
          </NavLink>
        </div>
      </SinglePostAuthorBar>
    </div>
  );
};

适用场景： #

• 社区作者栏不需要包含在帖子跳转区域内
• 布局上可以将作者栏与帖子主体拆分，代码结构更简洁，无需额外的事件处理

为什么这是合理实践？ #

这两种方案都严格遵循HTML规范，同时：

• 保留了路由组件的核心功能（比如NavLink的active状态管理）
• 交互逻辑清晰，不存在潜在的浏览器行为异常
• 代码可维护性高，后续修改跳转逻辑或样式都很方便

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