无法使用<a href="#"> [React,react-scrollspy]

Question

I'm using this library https://github.com/makotot/react-scrollspy滚动到Div以获得div效果滚动。但是，在关注文档后，我似乎无法使其正常工作。代码：

<RewardContainer>
                <div className="pageWrapper">
                    <div className="rewardInfoWrapper">
                        <div className="tabsContainer">
                            <div>
                                <Scrollspy
                                    items={[
                                        "section-1",
                                        "section-2",
                                        "section-3"
                                    ]}
                                    currentClassName="is-current"
                                >
                                    <li>
                                        <a
                                            href="#section-1"
                                            className="c-side-nav__link"
                                        >
                                            Streak
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            href="#section-2"
                                            className="c-side-nav__link"
                                        >
                                            Gems
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            href="#section-3"
                                            className="c-side-nav__link"
                                        >
                                            Xp Points
                                        </a>
                                    </li>
                                </Scrollspy>
                            </div>
                        </div>
                        <div className="columnContainer">
                            <div className="tabInfo">
                                <div>
                                    <div id="section-1">
                                            <p>
                                                This is Section 1
                                            </p>
                                    </div>
                                    <div id="section-2">
                                            <p>
                                                This is Section 2
                                            </p>
                                        </div>
                                    <div id="section-3">
                                            <p>
                                                This is Section 3
                                            </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </RewardContainer>

问题是，我的一个href =＆＃34; #id＆＃34;标签重新加载浏览器并将id视为路径而不是滚动到该div的id。例如，单击第三个li元素会在网址中重新加载http://localhost:7000/#section-3的浏览器。