使用链接 NextJs 在卡片中嵌套链接和按钮

Question

我在 SO 上搜索了很多，但找不到任何 100% 有效的答案。我的问题是，我的 NextJs 应用程序中有一个围绕<Link> 标签的卡片组件。我里面还有一个<Link>标签、2 个外部链接（<a>标签）和一个按钮。但这些都不起作用。我尝试放置position: relative按钮和锚标记，但它部分解决了问题（只有使用鼠标中键单击才能导航到链接，这会打开指向新选项卡的链接）。我想让它起作用，以便记录任何点击。

---

卡组件

<Link href={`/${song.singer}/${song.title}`} passHref>
        <div className={style.cardOutter}>
            <div className={style.cardHeader} style={{ backgroundImage: `url(${sdDefault(song.thumbnail)})` }}></div>
            <div className={style.cardBody}>
                <p>{song.title}</p>
                {song.fts !== '' ? 
                    <div className={style.card_fts}>
                        <span>{song.fts}</span>    
                    </div>
                :
                    null
                }
                <div className={style.cardInfoCont}>
                    <small>[{song.lang}] {song.album} - {song.genre}</small>
                </div>
            </div>
            <div className={style.cardButtons}>
                <a href={`https://www.youtube.com/watch?v=${song.thumbnail}`} target='_blank' rel='noreferrer' title='Listen On YouTube'><YouTubSimpleIcon color='#ff0000' width={30} height={30} /></a>
                <button disabled={!authContext.isAuth} title='Add To Favouarites'><HeartIcon color='#ff0000' width={30} height={30} /></button>
                <a href={`https://open.spotify.com/${song.spotifyURL === undefined ? '' : song.spotifyURL}`} target='_blank' rel='noreferrer' title='Listen On Spotify'><SpotifySimpleIcon color='#1db954' width={30} height={30} /></a>
            </div>
            <div className={style.cardLyricsBtn}>
                <Link href={`/${song.singer}`} passHref>
                    <button>   
                        Check The Artist!
                    </button>
                </Link>
            </div>
        </div>
    </Link>

SCSS文件

.cardOutter {
width: 250px;
height: fit-content;
border-radius: 5px;
margin: auto;
margin-top: 2rem;
background-color: $primaryBlack;
color: $lightWhite;
transition: transform 250ms linear;
-webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.7);
cursor: pointer;
.cardHeader {
    @include mixins.d-flex(center, center, row);
    width: 100%;
    min-height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px 5px 0 0;
}
.cardBody {
    width: 100%;
    padding: .5rem 1rem;
    p {
        width: 100%;
        text-align: center;
        font-size: 1.1rem;
        font-weight: 500;
    }
    .card_fts {
        width: 100%;
        text-align: center;
        font-size: 1rem;
        font-weight: 400;
    }
    .cardInfoCont {
        @include mixins.d-flex(center, center, row);
        width: 100%;
        margin-top: .4rem;
    }
}
.cardButtons {
    @include mixins.d-flex(center, space-around, row);
    margin: .5rem 0;
    padding-bottom: 1rem;
    button {
        @include mixins.naturalButton();
        @include mixins.d-flex(center, center, row);
        background-color: transparent;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        position: relative;
        z-index: 100;
    }
    a {
        @include mixins.simpleAnchor();
        @include mixins.d-flex(center, center, row);
        background-color: transparent;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        position: relative;
        z-index: 100;
    }
}
.cardLyricsBtn {
    @include mixins.d-flex(center, center, row);
    border-radius: 0 0 5px 5px;
    button {
        @include mixins.naturalButton();
        @include mixins.d-flex(center, center, row);
        font-size: 1.2rem;
        font-weight: 500;
        width: 100%;
        padding: .5rem 0;
        border-radius: 0 0 5px 5px;
        transition: background 200ms linear;
    }
    a {
        @include mixins.simpleAnchor();
        @include mixins.d-flex(center, center, row);
        font-size: 1.2rem;
        font-weight: 500;
        width: 100%;
        padding: .5rem 0;
        border-radius: 0 0 5px 5px;
    }
}
}

Answer 1

这个问题与 Next.js 并没有真正的关系。使用普通的锚标记也会遇到同样的问题，因为嵌套链接会生成无效的 HTML，尽管有一些解决方法，例如将嵌套链接放入objecttag中。

除此之外，您还可以尝试以下方法：

1. onClick通过处理程序而不是锚标记来处理容器链接或嵌套链接。
2. 不要将链接嵌套在 HTML 树中，而是使它们成为同级链接并仅使用 CSS 对齐它们。您可以使用一个div容器并将所有链接放置position: absolute在该 div 内。

无论如何，您可能还需要查看事件冒泡并在onClick={e => e.stopPropagation()}必要时添加事件冒泡。