React单页应用点击导航栏链接滚动到指定区块实现方案咨询

我会提供两种可直接落地的实现方式，你可以根据需求选择：

方案1：原生React实现（无第三方依赖） #

步骤1：调整App.js结构 #

你当前的路由配置是把About、Portfolio、Contact作为独立页面处理，如果要实现单页滚动效果，先把所有区块组件整合到首页路由下，给每个区块设置唯一id：

function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <div className="app">
      <Router>
        <Nav open={menuOpen} setOpen={setMenuOpen} />
        {/* 所有区块都放在同一页面，设置对应id */}
        <section id="home">
          <Home />
        </section>
        <section id="about">
          <About />
        </section>
        <section id="portfolio">
          <Portfolio />
        </section>
        <section id="contact">
          <Contact />
        </section>
        <Footer />
      </Router>
    </div>
  );
}

步骤2：开启全局平滑滚动 #

在全局css文件中添加如下配置，实现滚动动画效果：

html {
  scroll-behavior: smooth;
}

步骤3：修改Nav.js的导航链接 #

把原来的React Router Link替换成带hash锚点的链接，点击直接跳转到对应id的区块：

<div className="wrapper">
  <div className="left">
    <div className="navlinks">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#portfolio">Portfolio</a>
      <a href="#contact">Contact</a>
    </div>
  </div>
</div>

如果需要保留React Router的路由能力，也可以给Link添加hash属性，同时监听路由变化触发滚动：

<Link to="/#about">About</Link>

方案2：react-scroll库实现（功能更丰富，支持自定义滚动参数） #

如果需要控制滚动时长、偏移量（适配固定导航栏遮挡问题）、滚动结束回调等功能，可以用这个库实现：

步骤1：安装依赖 #

执行安装命令：
npm install react-scroll

步骤2：修改Nav.js导航组件 #

替换成react-scroll提供的Link组件，自定义滚动参数：

import { Link } from 'react-scroll';

<div className="wrapper">
  <div className="left">
    <div className="navlinks">
      <Link 
        to="home" 
        smooth={true} 
        duration={500} 
        offset={-80} // 偏移量，适配固定导航的高度，避免内容被导航遮挡
      >
        Home
      </Link>
      <Link to="about" smooth={true} duration={500} offset={-80}>About</Link>
      <Link to="portfolio" smooth={true} duration={500} offset={-80}>Portfolio</Link>
      <Link to="contact" smooth={true} duration={500} offset={-80}>Contact</Link>
    </div>
  </div>
</div>

步骤3：给对应区块设置id #

和原生方案一致，给每个区块的根元素设置和Link的to属性匹配的id即可。

内容的提问来源于stack exchange，提问作者Digamber negi