Javascript React-可平滑滚动至页面某一部分的导航

因此，我正在尝试为我的单页应用程序创建一个导航，它将平滑滚动到页面的某个部分

我想让我的导航在页面的顶部与链接，当用户点击，将顺利滚动到页面的部分。我也希望这样，如果用户直接访问链接

website.com/about

，它将平滑滚动到该部分，就像您在导航组件上单击

about

一样

我了解

react-router-dom

如何用于路由页面，但我对如何使其用于此特定目的感到困惑

这可以通过HashRouter实现吗

以下是我目前拥有的代码：

function Header() {
  return (
    <>
      <Link to="/">Hero</Link>
      <Link to="/">About</Link>
      <Link to="/">Contact</Link>
    </>
  );
}

function Hero() {
  return (
    <section>
      <h1>Hero Section</h1>
    </section>
  );
}

function About() {
  return (
    <section>
      <h1>About Section</h1>
    </section>
  );
}

function Contact() {
  return (
    <section>
      <h1>Contact Section</h1>
    </section>
  );
}

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Hero />
        <About />
        <Contact />
      </BrowserRouter>
    </div>
  );
}

函数头（）{
返回(
英雄
关于
接触
);
}
函数英雄（）{
返回(
英雄组
);
}
函数About（）{
返回(
关于部分
);
}
功能联系人（）{
返回(
接触段
);
}
导出默认函数App（）{
返回(
，fork已被通知！：）
您可以使用
锚定
标记，而不是
react router dom
中的
链接
，并在节上具有
id
。单击锚定标记后，滚动到相应的节

 <a
  href="/"
  onClick={e => {
  let hero = document.getElementById("hero");
  e.preventDefault();  // Stop Page Reloading
  hero && hero.scrollIntoView();
  }}
  >
  Hero
  </a>

  // Rest of Code 

  function Hero() {
   return (
    <section id="hero">
      <h1>Hero Section</h1>
    </section>
   );
  }

代码沙盒

希望这有助于更新地址栏中的链接，请使用@Abdullah Abid的答案，但更改
有一个名为
react scroll
的组件。我没有尝试过，但它看起来像是您正在寻找的：您是否考虑过使用常规锚定标记（
）设置页面的css
滚动行为：平滑
？@Jordan react中有一个
-为什么不使用它？@terrymorse我不喜欢使用外部软件包。@RachelGallen我很确定
滚动视图
是react原生的东西，不是吗？不幸的是，这不符合我问题中的标准，你不能使用URL不会平滑滚动，它只是快速进入视图。您可以使用
scrollIntoView（{behavior:'smooth'）使其平滑滚动
@AlexWayne修复了平滑部分，但我仍然无法使用URL直接转到该部分。@Jordan我添加了平滑效果并临时制作了一点，只需确保该部分的id与URL相同（我已更新了codesandbox。请查看）@AbdullahAbid这肯定比我希望的更有效。有没有办法在单击链接后更改URL？例如，如果我单击联系人链接，URL将更新为
/contact
？
  useEffect(() => {
    let url = window.location.href.split("/");
    let target = url[url.length - 1].toLowerCase();
    let element = document.getElementById(target);
    element && element.scrollIntoView({ behavior: "smooth", block: "start"});
  }, []);