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

Question

我在 S.O 上搜索了很多。但我找不到任何 100% 有效的答案。我的问题是我在 NextJs 应用程序中有一个卡片组件，它包裹在 <Link> 标签。我还有一个内部的 <Link> 标签，2 个外部的 links（<a> 标签）和一个按钮。但是 none 这些工作。我试过将 position: relative 放在按钮和锚标记上，但它部分解决了问题（如果我使用中键单击，我可以导航到 link ONLY我的鼠标，它打开 link 到一个新标签）。我想让它工作，以便记录任何点击。

卡片组件

<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 没有真正的关系。你会遇到与普通锚标记相同的问题，因为嵌套 links 会产生无效的 HTML，尽管有一些解决方法 like putting the nested link into an object tag.

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

通过 onClick 处理程序而不是锚标记处理容器 link 或嵌套的 link。
不要将您的 link 嵌套在 HTML 树中，而是让它们成为兄弟姐妹并仅使用 CSS 对齐它们。您可以使用 div 容器并将所有带有 position: absolute 的 link 放置在 div.

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

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

Nested Links & Buttons In A Card With Link NextJs

css

hyperlink

typescript

next.js

card