Gatsby项目嵌套使用AniLink触发validateDOMNesting错误如何解决？

错误原因 #

这个报错是HTML规范的原生限制，和AniLink本身没有直接关系：<a> 标签本身就不允许嵌套作为另一个<a>的子元素。而AniLink底层渲染的就是标准<a>标签，你把整个卡片包裹在AniLink里，卡片内部的Author组件又返回了一个AniLink，自然就出现了<a>嵌套<a>的结构，触发DOM校验报错。

可行解决方案 #

方案1：取消整卡AniLink包裹，用JS模拟整卡点击跳转（最常用）

把外层的AniLink替换成普通div，给div加点击事件调用Gatsby的导航方法，同时给内部的作者链接加点击事件阻止冒泡，避免触发父级的卡片跳转：

import React from 'react'
import AniLink from "gatsby-plugin-transition-link/AniLink";
import { navigate } from 'gatsby' // 导入gatsby的导航方法
const titleStyle = {
    fontWeight: "700",
    cursor: "pointer" // 加鼠标指针提示可点击
}
const authorLinkStyle = {
    color: "#00BCD4"
}
const Author = ({ children, to }) => (
    <AniLink style={authorLinkStyle} to={to} className="font-weight-bold" fade 
    onClick={e => e.stopPropagation()} // 阻止点击事件冒泡到父级卡片
    >
        {children}
    </AniLink>
)
const Card = ({ title, description, timeStamp, authorName, slug }) => {
    const cardTextColor = typeof window !== "undefined" && getComputedStyle(document.documentElement).getPropertyValue("--card-text-color")
    const cardLinkStyle = { color: cardTextColor, textDecoration: "none", cursor: "pointer" }
    // 整卡点击跳转方法
    const handleCardClick = () => {
        navigate(slug)
    }
    return (
        <div
            style={cardLinkStyle}
            onClick={handleCardClick}
            role="link" // 加无障碍属性
            tabIndex={0} // 加无障碍属性
            onKeyPress={e => e.key === 'Enter' && handleCardClick()} // 适配键盘回车访问
        >
            <div className="card my-4" >
                <div className="card-body" >
                    <h5 className="card-title" style={titleStyle}>{title}</h5>
                    <p className="card-text">{description}</p>
                    <h6 className="card-subtitle text-muted">
                        <Author to="/about">{authorName}</Author> on {timeStamp}
                    </h6>
                </div>
            </div>
        </div>)
}
export default Card

方案2：调整链接结构，仅把卡片标题作为跳转入口

如果不需要整卡点击的交互，直接去掉外层的AniLink，只给标题加AniLink跳转，作者链接保持独立即可，这种方案代码改动最小，也符合大多数场景的交互规范：

// 其余代码不变，仅修改Card组件的return部分
return (
    <div className="card my-4" >
        <div className="card-body" >
            <AniLink
                style={cardLinkStyle}
                to={slug}
                cover
                bg="#00BCD4"
            >
                <h5 className="card-title" style={titleStyle}>{title}</h5>
            </AniLink>
            <p className="card-text">{description}</p>
            <h6 className="card-subtitle text-muted">
                <Author to="/about">{authorName}</Author> on {timeStamp}
            </h6>
        </div>
    </div>
)

注意事项 #

不推荐通过修改DOM结构强制嵌套a标签的方式规避报错，这种方式会导致用户右键打开新窗口、屏幕阅读器识别等功能异常，不符合Web可访问性规范。

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