React中点击Header组件导航项滚动至Main组件内指定组件的方法

下面是几种针对你的场景（Header组件嵌套在MainPage中，点击导航滚动到对应组件区域）的可行实现方案：

方法1：原生HTML锚点（最简实现） #

利用HTML原生锚点机制，无需额外React API，适合简单场景。

实现步骤： #

• 给目标容器（如AboutUs的父容器）添加唯一id属性
• Header中的导航项使用<a>标签，href指向对应id
• 若Header是固定定位，给目标容器添加margin-top抵消Header高度，避免内容被遮挡

代码示例：

// Header组件
function Header() {
  return (
    <header style={{ position: 'fixed', top: 0, width: '100%', padding: '1rem', background: '#fff' }}>
      <nav>
        <a href="#about-us" style={{ marginRight: '1rem' }}>关于我们</a>
        {/* 其他导航项 */}
      </nav>
    </header>
  );
}

// MainPage组件
function MainPage() {
  return (
    <main>
      <Header />
      {/* 页面其他内容 */}
      <div id="about-us" style={{ marginTop: '80px', padding: '2rem' }}>
        <AboutUs />
      </div>
    </main>
  );
}

方法2：React useRef + scrollIntoView（灵活可控） #

适合需要自定义滚动动画、或目标区域动态生成的场景，通过React的useRef获取DOM元素，调用scrollIntoView实现精准滚动。

实现步骤： #

1. 在MainPage中为目标容器创建ref
2. 定义滚动函数，接收ref并调用scrollIntoView
3. 将滚动函数通过props传递给Header组件
4. Header中点击导航项时触发该函数

代码示例：

// MainPage组件
import { useRef } from 'react';
import Header from './Header';
import AboutUs from './AboutUs';

function MainPage() {
  const aboutUsRef = useRef(null);

  const scrollToSection = (targetRef) => {
    if (targetRef.current) {
      targetRef.current.scrollIntoView({
        behavior: 'smooth', // 平滑滚动
        block: 'start' // 滚动到容器顶部
      });
    }
  };

  return (
    <main>
      <Header 
        onAboutClick={() => scrollToSection(aboutUsRef)}
        {/* 其他导航项的点击回调 */}
      />
      {/* 页面其他内容 */}
      <div ref={aboutUsRef} style={{ marginTop: '80px', padding: '2rem' }}>
        <AboutUs />
      </div>
    </main>
  );
}

// Header组件
function Header({ onAboutClick }) {
  return (
    <header style={{ position: 'fixed', top: 0, width: '100%', padding: '1rem', background: '#fff' }}>
      <nav>
        <button onClick={onAboutClick} style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>
          关于我们
        </button>
        {/* 其他导航按钮 */}
      </nav>
    </header>
  );
}

如果有多个导航项，可以优化为传递标识参数：

// MainPage中修改滚动函数
const scrollToSection = (sectionName) => {
  const sectionRefs = {
    about: aboutUsRef,
    // 其他区域的ref
  };
  const targetRef = sectionRefs[sectionName];
  if (targetRef?.current) {
    targetRef.current.scrollIntoView({ behavior: 'smooth' });
  }
};

// Header中调用
<button onClick={() => onNavClick('about')}>关于我们</button>

方法3：React Router哈希路由（路由同步场景） #

如果你的项目使用React Router，可以结合哈希路由实现，同时保持URL与滚动位置同步，便于分享链接。

实现步骤： #

1. 确保路由使用哈希模式（或BrowserRouter）
2. Header中使用<Link>组件指向目标容器的id哈希
3. 监听哈希变化，调整滚动位置以抵消固定Header的高度

代码示例：

// 路由配置
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Header />
      <Routes>
        <Route path="/" element={<MainPage />} />
      </Routes>
    </Router>
  );
}

// Header组件
function Header() {
  return (
    <header style={{ position: 'fixed', top: 0, width: '100%', padding: '1rem', background: '#fff' }}>
      <nav>
        <Link to="#about-us" style={{ marginRight: '1rem', textDecoration: 'none' }}>关于我们</Link>
      </nav>
    </header>
  );
}

// MainPage组件
import { useEffect } from 'react';

function MainPage() {
  useEffect(() => {
    const adjustScrollPosition = () => {
      const hash = window.location.hash;
      if (!hash) return;

      const targetElement = document.querySelector(hash);
      const headerElement = document.querySelector('header');
      if (!targetElement || !headerElement) return;

      // 计算滚动位置，减去Header高度避免遮挡
      const headerHeight = headerElement.offsetHeight;
      const targetTop = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
      
      window.scrollTo({
        top: targetTop,
        behavior: 'smooth'
      });
    };

    // 初始加载和哈希变化时执行
    window.addEventListener('hashchange', adjustScrollPosition);
    adjustScrollPosition();

    return () => window.removeEventListener('hashchange', adjustScrollPosition);
  }, []);

  return (
    <main>
      <div id="about-us" style={{ marginTop: '80px', padding: '2rem' }}>
        <AboutUs />
      </div>
    </main>
  );
}

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