如何为滚动html中的活动链接添加li边框

在reactjs中设计一个单页应用程序。我在页面顶部有一个固定的导航栏，我有4个部分。单击navabr中的链接，它会跳转到该特定部分。但我想用下面的小边框突出显示该li。如果用户在没有单击导航栏中的链接的情况下滚动到任何部分，则必须用边框突出显示该链接

// header.js

  <ul className="col-2 flex-row flex-justify-align-center ">
   <li className="navigation__link"><a  href="#problem">Problem</a></li>
   <li className="navigation__link"><a  href="#solution">Solution</a></li>
   <li className="navigation__link"><a href="#footprint">Footprint</a></li>
   <li className="navigation__link"><a  href="#services">Services</a></li>
   <li className="navigation__link"><a  href="#contact">Contact</a></li>             
  </ul>

//header.js

函数应用程序（）{
返回(
);
}

---

这个问题不清楚，因为我不知道如何为这个需求构建问题。

您需要使用scroll spy。访问此git存储库

---

相关问题：

@Krazy我不是那个否决你问题的人。

function App() {
  return (
    <div className="App">
      <div id="problem"></div>
      <Header></Header>
      <div id="solution">
        <Solution></Solution>
      </div>
      <div id="footprint">
        <Footprint></Footprint>
      </div>
      <div id="contact">
        <Contactus></Contactus>
        <Footer></Footer>
      </div>

    </div>
  );
}