如何实现React导航栏跳转至页面指定区域？

一、原生锚点修复（无需额外依赖） #

你当前的代码已经使用了原生锚点跳转，但由于导航栏设置了fixed="top"，跳转后目标区域会被导航栏遮挡，按以下方式修复：

1. 给目标区域添加顶部偏移
   给Pricing组件设置scroll-margin-top样式，数值匹配导航栏的实际高度（例如导航栏高度为80px）：

<Pricing id="pricing" style={{ scrollMarginTop: "80px" }} />

也可以通过CSS全局设置：

#pricing {
  scroll-margin-top: 80px;
}

2. 路由兼容处理
   如果项目使用React Router，必须使用HashRouter，否则原生锚点会失效；若使用BrowserRouter，建议换用react-scroll方案。

二、react-scroll正确配置（解决报错问题） #

若你想继续使用react-scroll，按以下步骤操作：

1. 安装依赖

npm install react-scroll
# 或使用 yarn 安装
yarn add react-scroll

2. 修改NavigationBar组件
   替换原有Nav.Link为react-scroll的Link，直接复用Bootstrap的样式类保证视觉一致：

import { Link } from "react-scroll";

const NavigationBar = () => {
  return (
    <>
      <Navbar bg="dark" fixed="top" variant="dark">
        <Container>
          <Link
            to="home"
            smooth={true}
            duration={500}
            className="navbar-brand"
          >
            Bowsky
          </Link>
          <Nav className="me-auto">
            <Link
              to="home"
              smooth={true}
              duration={500}
              className="nav-link"
            >
              Home
            </Link>
            <Link
              to="features"
              smooth={true}
              duration={500}
              className="nav-link"
            >
              Features
            </Link>
            <Link
              to="pricing"
              smooth={true}
              duration={500}
              className="nav-link"
            >
              Pricing
            </Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
};

3. 确保目标组件有对应ID
   你已经给Pricing添加了id="pricing"，记得给其他需要跳转的区域也设置对应ID：

// Home区域（示例：SimpleCarousel的容器）
<div id="home">
  <SimpleCarousel data={caroselData} />
</div>

// Features组件根元素
<div id="features">
  {/* Features内容 */}
</div>

4. 常见报错排查

• 提示Cannot find module 'react-scroll'：删除node_modules和package-lock.json后重新安装依赖。
• 点击无反应：检查to属性值与目标元素ID完全一致（大小写敏感），若存在嵌套路由，确保react-scroll的Link不受路由逻辑干扰。

三、额外注意事项 #

• 导航栏高度需准确测量，scroll-margin-top的数值要与之匹配，避免遮挡或跳转偏移。
• 使用React Router时，优先选择react-scroll方案，避免原生锚点与路由规则冲突。

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