Chakra UI的LinkOverlay嵌套GatsbyLink时无法正常工作

问题表现 #

• 单独使用LinkOverlay、通过href配置跳转地址时，LinkBox容器整体点击跳转功能正常
• 按照路由库适配说明，将LinkOverlay嵌套在GatsbyLink内通过to属性指定路径时，LinkBox的整体链接功能完全失效
• 原问题代码：

<Flex {...props}>
   <LinkBox>
    <Image
      as={GatsbyImage}
      image={mainImage?.gatsbyImageData}
      alt={mainImage?.description || 'Article Main Image'}
      height="100px"
    />
    <Flex>
      <Text
        variant={'label'}
        as={GatsbyLink}
        to={`/${category?.slug}`}
        casing="uppercase"
      >
        {category?.title}
      </Text>
      <Link
        variant={'heading'}
        mt={1}
        lineHeight="1.2em"
        as={GatsbyLink}
        to={`/${category?.slug}/${slug}`}
      >
        <LinkOverlay>{title}</LinkOverlay>
      </Link>
    </Flex>
  </LinkBox>
</Flex>

失效原因 #

LinkOverlay默认渲染为原生<a>标签，核心逻辑是向上查找最近的LinkBox父容器，把自身的跳转行为绑定到整个父容器区域，实现整块点击跳转。
当前写法把LinkOverlay嵌套在已经作为GatsbyLink渲染的Chakra Link组件内部，属于两层可点击链接标签嵌套，既不符合HTML交互元素的嵌套规范，也直接打断了LinkOverlay向上匹配父容器、绑定全局点击事件的逻辑，最终导致整体跳转失效。

修复方案 #

不要嵌套两层链接组件，直接将GatsbyLink传入LinkOverlay的as属性，把to跳转路径直接配置在LinkOverlay上即可。

注意：分类跳转的独立GatsbyLink需要额外添加position: relative和zIndex: 1样式，提升点击优先级，避免被外层LinkOverlay的整体跳转覆盖，点击分类时不会误触发文章页跳转。

修正后代码：

<Flex {...props}>
   <LinkBox>
    <Image
      as={GatsbyImage}
      image={mainImage?.gatsbyImageData}
      alt={mainImage?.description || 'Article Main Image'}
      height="100px"
    />
    <Flex>
      <Text
        variant={'label'}
        as={GatsbyLink}
        to={`/${category?.slug}`}
        casing="uppercase"
        position="relative"
        zIndex={1}
      >
        {category?.title}
      </Text>
      <LinkOverlay
        as={GatsbyLink}
        to={`/${category?.slug}/${slug}`}
        variant={'heading'}
        mt={1}
        lineHeight="1.2em"
      >
        {title}
      </LinkOverlay>
    </Flex>
  </LinkBox>
</Flex>

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