Javascript React：如何防止按钮（包装在从React scroll导入的<；Link>；中）在单击时滚动

单击组件后，我使用

react scroll

获得平滑滚动效果

问题是，当我在组件中添加一个按钮时，为了能够制作一个收藏列表，在点击这个按钮后，也会出现平滑滚动的效果（这是可以理解的）

我的问题是，我如何防止这种行为

短模型：

import React from "react";
import { Link } from "react-scroll";

import iconSprites from "../images/sprite.svg";

const App = () => {
    const handleClickFavorite = () => {
        console.log("favorite clicked!");
    };

    return (
        <Link
            activeClass="active"
            to="test-destination"
            smooth={true}
            spy={true}
            duration={500}
            className="App-Link"
        >
            <div className="App-item">
                <img
                    className="App-item__img"
                    src={exampleSRC}
                    alt="img"
                />

                <div className="App-item__text">
                    <p>Lorem ipsum</p>
                </div>

                <button
                    onClick={handleClickFavorite}
                    className="App-item__btn--favorite"
                >
                    <svg className="App-item__icon--favorite">
                        <use href={iconSprites + "#icon-star"} />
                    </svg>
                </button>
            </div>
        </Link>
    );
};

export default App;

---

由于按钮是使用链接组件包装的元素的子元素，因此链接功能将扩展到它

我想有两种解决方案：

使div和button元素成为兄弟元素，使用css将它们放置在彼此上方。这样，就可以在链接组件中封装div，而不必同时封装按钮

在按钮和preventDefault（）上使用onClick处理程序来阻止从div继承的功能的发生（不确定这一个是否有效，必须对它进行一些处理，以查看它是否真的起作用）

return (
<div className="App-item">
        <Link
            activeClass="active"
            to="test-destination"
            smooth={true}
            spy={true}
            duration={500}
            className="App-Link"
        >
            <div className="App-item__container">
                <img
                    className="App-item__img"
                    src={exampleSRC}
                    alt="img"
                />

                <div className="App-item__text">
                    <p>Lorem ipsum</p>
                </div>
            </div>
          </Link>
                <button
                    onClick={handleClickFavorite}
                    className="App-item__btn--favorite"
                >
                    <svg className="App-item__icon--favorite">
                        <use href={iconSprites + "#icon-star"} />
                    </svg>
                </button>
           </div>
    );
};