如何让Link包裹的子按钮不触发父级路由，执行独立功能？

当然可行，你只需要在按钮的点击事件里阻止事件冒泡，就能让按钮执行自定义逻辑而不触发外层Link的路由跳转，同时保留卡片其他区域的跳转功能。

修改后的代码如下：

<Link to={`/shop/${book.id}`}>
    <div className='book-card'>
        <img src={book.image} alt="" />
        <h3>{book.title}</h3>
        <div>
            <p>Rating :{book.rating}</p>
            <p>${book.price}</p>
        </div>
        <button onClick={(e)=> {
            e.stopPropagation(); // 阻止事件冒泡
            console.log('Clicked');
        }}>Add To Cart</button>
    </div>
</Link>

原理说明 #

React Router的Link组件是通过监听父元素的点击事件来触发路由跳转的。当点击按钮时，默认情况下点击事件会向上冒泡到外层的Link组件，导致跳转。而e.stopPropagation()会终止事件的传播，让事件停在按钮这一层，这样Link就不会接收到点击事件，自然不会触发跳转，同时按钮的自定义逻辑可以正常执行。

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