React Router v6单页作品集锚点路由失效问题求助

问题本质 #

单页网站的区块跳转属于锚点滚动，不是传统的路由页面切换。直接用/:id这类路由参数不会触发页面滚动——React Router默认只负责组件渲染，不处理元素定位逻辑。

解决方案 #

方案1：监听路由锚点，手动触发滚动 #

在根组件或主页面里，用useLocation监听路径变化，当路径带锚点（#后缀）时，自动滚动到对应ID的元素：

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

// 单独封装滚动逻辑组件
function ScrollToAnchor() {
  const location = useLocation();

  useEffect(() => {
    const hash = location.hash;
    if (hash) {
      // 去掉#号，拿到目标元素ID
      const targetId = hash.slice(1);
      const element = document.getElementById(targetId);
      if (element) {
        // 平滑滚动到目标区块
        element.scrollIntoView({ behavior: 'smooth' });
      }
    } else {
      // 没有锚点时滚回顶部
      window.scrollTo(0, 0);
    }
  }, [location]);

  return null;
}

// 在App里引入这个组件
function App() {
  return (
    <>
      <ScrollToAnchor />
      {/* 你的导航栏、主内容组件 */}
    </>
  );
}

然后导航链接直接用锚点格式：

// Navbar组件里的链接
<Link to="/#about">关于我</Link>
<Link to="/#projects">项目作品</Link>

方案2：用路由参数关联区块ID #

如果坚持用/:id的路由格式，就在主页面组件里根据参数定位元素：

1. 路由配置（复用Home组件）：

import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
import Home from './Home';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Home />}>
      <Route path=":sectionId" element={<Home />} />
    </Route>
  )
);

2. Home组件内处理滚动：

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

function Home() {
  const { sectionId } = useParams();

  useEffect(() => {
    if (sectionId) {
      const targetElement = document.getElementById(sectionId);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, [sectionId]);

  return (
    <div>
      <section id="home">首页内容</section>
      <section id="about">关于我内容</section>
      <section id="projects">项目展示内容</section>
    </div>
  );
}

3. 导航链接写法：

<Link to="/about">关于我</Link>
<Link to="/projects">项目作品</Link>

常见坑点排查 #

• 确保区块元素的id和导航目标完全一致（大小写敏感）
• 检查页面是否有overflow: hidden的CSS属性，会阻止滚动
• 如果导航栏是固定定位，滚动时要预留偏移量：

// 计算导航栏高度，滚动时减去该值
const navbarHeight = document.querySelector('.navbar').offsetHeight;
window.scrollTo({
  top: element.offsetTop - navbarHeight,
  behavior: 'smooth'
});

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