React Router如何在页面加载时导航到指定锚点区块？

这个问题是React Router的BrowserRouter模式下的常见问题，核心原因有3个：

• BrowserRouter基于HTML5 History API实现路由，默认不会主动处理URL中#开头的hash锚点片段，路由初始化完成后不会自动触发浏览器原生的锚点定位滚动
• 单页应用加载时，组件是按顺序异步挂载的，浏览器初始解析URL的时机早于Contact组件对应的DOM节点挂载时间，等id为contact的元素渲染出来时，浏览器已经错过了执行锚点定位的时机
• 如果是页内点击跳转，直接写原生<a href="#contact">会被React Router识别为路由跳转请求，不会执行原生锚点滚动逻辑。

分场景处理即可：

1. 解决直接访问带hash URL无法定位的问题 #

写一个通用的锚点滚动监听组件，放在路由根层级监听地址变化，等DOM渲染完成后手动触发滚动定位：

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

const ScrollToHash = () => {
  const location = useLocation();

  useEffect(() => {
    const { hash } = location;
    if (!hash) return;
    // 加0延时确保目标DOM已经挂载完成，适配异步渲染场景
    setTimeout(() => {
      const targetEl = document.querySelector(hash);
      if (targetEl) {
        targetEl.scrollIntoView({ behavior: 'smooth' });
      }
    }, 0);
  }, [location]);

  return null;
};

把这个组件注入到路由配置中，保证路由切换、页面加载时都能触发监听：

<BrowserRouter>
  <ScrollToHash />
  <Routes>
    <Route path="/" element={<App/>}/>
  </Routes>
</BrowserRouter>

2. 解决页内锚点跳转失效问题 #

不要用原生a标签做锚点跳转，改用React Router提供的Link组件，通过hash属性指定锚点：

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

// 导航栏中的跳转链接写法
<Link to="/#contact">联系我们</Link>

如果页面有固定在顶部的导航栏，会挡住锚点定位的元素，可以给锚点目标元素加滚动偏移样式：

.Contact {
  /* 数值和固定导航栏高度保持一致即可 */
  scroll-margin-top: 80px;
}

配置完成后可以先检查Contact组件的id拼写是否正确，避免低级错误导致定位失败。

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