如何在React单页网站中实现NavLink跳转到同页组件？

步骤1：给目标组件添加唯一ID #

每个需要滚动到的组件，都要设置一个唯一的id属性，这是锚点跳转的基础：

// Clases组件示例
const Clases = () => {
  return (
    <div id="clases" className="py-5">
      <h2>Clases</h2>
      {/* 组件内容 */}
    </div>
  );
};

// 其他组件同理设置对应id：
// Estudio → id="estudio"
// Tu Instructora → id="tu-instructora"
// Contacto → id="contacto"

步骤2：修改Nav.Link的href指向对应ID #

直接把href的值改成目标组件的id（前缀加#），就能实现基础的锚点跳转：

<Nav className="mx-auto Nav nav-links">
  <Nav.Link href="#clases">Clases</Nav.Link>
  <Nav.Link href="#estudio">Estudio</Nav.Link>
  <Nav.Link href="#tu-instructora">Tu Instructora</Nav.Link>
  <Nav.Link href="#contacto">Contacto</Nav.Link>
</Nav>

步骤3：添加平滑滚动效果 #

默认的锚点跳转是瞬间的，加上平滑滚动体验更好，有两种简单实现方式：

方法A：全局CSS实现（最简单）

在你的全局样式文件中添加：

html {
  scroll-behavior: smooth;
}

方法B：React钩子实现（更可控）

如果需要自定义滚动位置（比如避开固定导航栏的遮挡），可以用useRef和scrollIntoView：

1. 用forwardRef包装子组件，允许父组件传递ref：

import { forwardRef } from 'react';

const Clases = forwardRef((props, ref) => {
  return (
    <div ref={ref} id="clases" className="py-5">
      <h2>Clases</h2>
      {/* 组件内容 */}
    </div>
  );
});
Clases.displayName = 'Clases';
export default Clases;

2. 在父组件中管理所有组件的ref，处理点击事件：

import { useRef } from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import Clases from './Clases';
import Estudio from './Estudio';
import TuInstructora from './TuInstructora';
import Contacto from './Contacto';

function App() {
  // 存储所有组件的ref
  const sectionRefs = {
    clases: useRef(null),
    estudio: useRef(null),
    tuInstructora: useRef(null),
    contacto: useRef(null),
  };

  // 自定义滚动函数
  const handleScroll = (e, sectionKey) => {
    e.preventDefault(); // 阻止默认锚点跳转
    sectionRefs[sectionKey].current?.scrollIntoView({
      behavior: 'smooth',
      block: 'start', // 可选：控制滚动到组件的位置，比如'center'
    });
  };

  return (
    <>
      <Navbar fixed="top" bg="light" expand="lg">
        <Nav className="mx-auto Nav nav-links">
          <Nav.Link onClick={(e) => handleScroll(e, 'clases')} href="#clases">Clases</Nav.Link>
          <Nav.Link onClick={(e) => handleScroll(e, 'estudio')} href="#estudio">Estudio</Nav.Link>
          <Nav.Link onClick={(e) => handleScroll(e, 'tuInstructora')} href="#tu-instructora">Tu Instructora</Nav.Link>
          <Nav.Link onClick={(e) => handleScroll(e, 'contacto')} href="#contacto">Contacto</Nav.Link>
        </Nav>
      </Navbar>

      <div className="container pt-5">
        <Clases ref={sectionRefs.clases} />
        <Estudio ref={sectionRefs.estudio} />
        <TuInstructora ref={sectionRefs.tuInstructora} />
        <Contacto ref={sectionRefs.contacto} />
      </div>
    </>
  );
}

export default App;

解决固定导航栏遮挡内容的问题 #

如果你的NavBar是fixed="top"的，滚动后组件顶部会被导航栏挡住，可以给每个组件添加偏移样式：

.component-section {
  padding-top: 70px; /* 数值等于导航栏的高度 */
  margin-top: -70px; /* 抵消padding带来的布局偏移 */
}

然后给组件加上这个类：

<div ref={ref} id="clases" className="component-section py-5">

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