React - 导航将平滑滚动到页面的一部分

Question

因此，我尝试为我的单页应用程序创建一个导航，该导航将平滑地向下滚动到页面的部分。

我希望在页面顶部设置带有链接的导航，当用户单击这些链接时，会将它们平滑地向下滚动到页面的部分。我也希望这样，例如，如果用户直接转到链接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>
  );
}

我还提供了一个CodeSandBox，感谢叉子！:)

Answer 1

您可以做的是使用anchor标签而不是Linkfrom并在各部分上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>
   );
  }

要使用 url 滚动到某个部分，path您必须获取提取内容path并滚动到具有特定id 的url部分path

  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"});
  }, []);

代码沙箱在这里

希望这可以帮助