如何在React中设置可跳转当前页面指定位置的内部链接

可以使用React Router的Link组件实现单页内部锚点跳转，你此前通过id标记页面板块的逻辑完全可以复用，以下是具体实现方案：

基础实现（无需额外逻辑） #

直接给Link的to属性传入携带哈希值的路径即可，用法和原生HTML锚点完全一致：

// 导航栏代码
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/#home">首页</Link>
      <Link to="/#about">关于我</Link>
      <Link to="/#projects">作品集</Link>
      <Link to="/#contact">联系方式</Link>
    </nav>
  )
}

// 首页板块代码，和原生逻辑一致给板块加对应id
function HomePage() {
  return (
    <div>
      <section id="home">首页板块内容</section>
      <section id="about">关于我板块内容</section>
      <section id="projects">作品集板块内容</section>
      <section id="contact">联系方式板块内容</section>
    </div>
  )
}

优化：平滑滚动+固定导航栏适配 #

如果需要更流畅的跳转体验，或者你的导航栏是固定定位会遮挡跳转后的内容，可以用两种方案优化：

• 方案1：纯CSS实现平滑滚动，全局添加样式即可：

html {
  scroll-behavior: smooth;
}

• 方案2：JS自定义滚动控制，适配固定导航栏的偏移需求：

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

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

  // 监听哈希变化触发滚动
  useEffect(() => {
    if (location.hash) {
      const target = document.querySelector(location.hash);
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth', // 平滑滚动
          block: 'start',
          // 若固定导航栏高度为80px，可加偏移避免遮挡
          // offsetTop: 80
        });
      }
    }
  }, [location.hash]);

  // 其余页面内容代码
  return (
    {/* 页面板块代码 */}
  )
}

轻量替代方案（无React Router依赖） #

如果你的作品集是纯单页，没有多页面跳转的需求，完全不需要引入Link组件，直接用原生<a>标签实现即可，写法和你此前原生HTML开发的逻辑完全一致：

<nav>
  <a href="#home">首页</a>
  <a href="#about">关于我</a>
  <a href="#projects">作品集</a>
  <a href="#contact">联系方式</a>
</nav>

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