React中导航栏跳转至其他页面指定位置的实现方案咨询

方案1：React Router + 原生scrollIntoView #

这种方式无需额外依赖，利用React Router的hash和原生DOM滚动API实现：

步骤1：在首页目标区域添加标识和ref #

在首页的"How it works"区域添加id和ref，监听路由hash变化触发滚动：

import { useRef, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function HomePage() {
  const howItWorksRef = useRef(null);
  const location = useLocation();

  useEffect(() => {
    // 当路由hash匹配目标区域时执行滚动
    if (location.hash === '#how-it-works' && howItWorksRef.current) {
      howItWorksRef.current.scrollIntoView({
        behavior: 'smooth', // 开启平滑滚动（可选）
        block: 'start', // 调整元素与视口的对齐方式，可选'center'/'end'
        inline: 'nearest'
      });
    }
  }, [location.hash]);

  return (
    <div>
      {/* 页面顶部内容 */}
      <div ref={howItWorksRef} id="how-it-works">
        {/* How it works 区域的具体内容 */}
      </div>
      {/* 页面其他内容 */}
    </div>
  );
}

步骤2：导航按钮触发带hash的路由跳转 #

在导航栏的按钮中，使用useNavigate跳转到带hash的首页路径：

import { useNavigate } from 'react-router-dom';

function Navbar() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/#how-it-works');
  };

  return (
    <nav>
      <button onClick={handleClick}>How it works</button>
    </nav>
  );
}

方案2：使用react-scroll库（推荐） #

react-scroll是专门处理页面内/跨页面滚动定位的库，封装了滚动逻辑、偏移量处理等细节，使用更简洁：

步骤1：安装依赖 #

npm install react-scroll
# 或
yarn add react-scroll

步骤2：配置导航按钮 #

用库提供的Link组件替代原生按钮，直接指定目标区域的名称：

import { Link } from 'react-scroll';

function Navbar() {
  return (
    <nav>
      <Link
        to="how-it-works"
        spy={true}
        smooth={true}
        offset={-80} // 偏移量，用于避开固定导航栏（根据实际高度调整）
        duration={500} // 滚动时长（毫秒）
      >
        How it works
      </Link>
    </nav>
  );
}

步骤3：在首页标记目标区域 #

用Element组件包裹目标区域，设置对应的名称：

import { Element } from 'react-scroll';

function HomePage() {
  return (
    <div>
      {/* 页面顶部内容 */}
      <Element name="how-it-works">
        {/* How it works 区域的具体内容 */}
      </Element>
      {/* 页面其他内容 */}
    </div>
  );
}

方案3：自定义跨页面滚动逻辑 #

如果需要更灵活的控制（比如传递额外参数），可以通过路由state传递滚动指令：

步骤1：导航按钮处理跳转逻辑 #

判断当前是否在首页，在首页则直接滚动，否则跳转到首页并携带滚动指令：

import { useNavigate, useLocation } from 'react-router-dom';

function Navbar() {
  const navigate = useNavigate();
  const location = useLocation();

  const handleClick = () => {
    if (location.pathname === '/') {
      // 已在首页，直接定位目标区域
      const target = document.getElementById('how-it-works');
      target?.scrollIntoView({ behavior: 'smooth' });
    } else {
      // 跳转到首页并传递滚动指令
      navigate('/', { state: { scrollTo: 'how-it-works' } });
    }
  };

  return (
    <nav>
      <button onClick={handleClick}>How it works</button>
    </nav>
  );
}

步骤2：首页监听路由state执行滚动 #

在首页监听路由state，触发滚动后清除state避免刷新时重复执行：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function HomePage() {
  const location = useLocation();

  useEffect(() => {
    if (location.state?.scrollTo === 'how-it-works') {
      const target = document.getElementById('how-it-works');
      target?.scrollIntoView({ behavior: 'smooth' });
      // 清除state，防止页面刷新后再次触发滚动
      window.history.replaceState({}, document.title);
    }
  }, [location.state]);

  return (
    <div>
      {/* 页面顶部内容 */}
      <div id="how-it-works">
        {/* How it works 区域的具体内容 */}
      </div>
      {/* 页面其他内容 */}
    </div>
  );
}

注意事项 #

• 如果页面有固定导航栏，需要调整滚动的偏移量（比如方案2的offset参数，或方案1中在scrollIntoView前计算偏移），确保目标区域不被导航栏遮挡。
• smooth滚动依赖浏览器支持，如需兼容旧浏览器可添加polyfill或移除该参数使用默认滚动。

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