React Link标签跨页跳转首页指定锚点区块失效如何解决

页面头部存在名为contact me的按钮，需求为：用户处于任意非首页页面时，点击按钮都能跳转至首页id为contactsec的联系区块。
最初尝试使用React Router的Link组件实现，代码如下：

<Link to="/#contactsec" > contact Me <Link>

实际运行时点击按钮仅能跳转到首页，无法自动定位到指定的联系区块位置。

React Router 默认不会接管跨页面的hash锚点滚动逻辑：当从其他页面切换到首页时，路由会先完成URL跳转，但首页对应id的DOM节点还没完成渲染，原生锚点定位找不到目标元素，就不会触发滚动定位。另外贴出的代码里Link标签闭合写法错误，结尾写成了开标签<Link>，正确闭合应该是</Link>，这类语法错误也可能引发路由行为异常。

• 方案1：首页组件内监听hash触发滚动（稳定性最高，推荐）
  修正Link标签的闭合错误，保留带hash的跳转写法即可：

  <Link to="/#contactsec">contact Me</Link>
  

  在首页组件中引入路由的location对象，监听地址变化，等DOM渲染完成后匹配到目标hash就执行滚动：

  import { useEffect } from 'react';
  import { useLocation } from 'react-router-dom';
  
  const HomePage = () => {
    const location = useLocation();
    useEffect(() => {
      if (location.hash === '#contactsec') {
        const targetBlock = document.getElementById('contactsec');
        targetBlock?.scrollIntoView({
          behavior: 'smooth', // 平滑滚动，不需要可以改成auto
          block: 'start' // 让区块顶部对齐视口顶部
        });
      }
    }, [location]);
  
    return (
      {/* 首页其他内容 */}
      <section id="contactsec">
        {/* 联系区块实际内容 */}
      </section>
    )
  }
  

• 方案2：点击事件手动控制跳转+滚动
  不需要依赖Link组件，直接用useNavigate钩子控制路由跳转，等首页DOM挂载后触发滚动：

  import { useNavigate } from 'react-router-dom';
  
  const SiteHeader = () => {
    const navigate = useNavigate();
    const handleContactJump = () => {
      navigate('/');
      // 延迟时间根据首页渲染复杂度调整，一般80-150ms足够
      setTimeout(() => {
        document.getElementById('contactsec')?.scrollIntoView({
          behavior: 'smooth'
        });
      }, 100);
    };
  
    return <button onClick={handleContactJump}>contact Me</button>
  }
  

补充：如果项目用的是React Router v6.4+版本，可以把滚动逻辑绑定到首页路由的loader触发完成后执行，不需要手动写延迟，能避免网络慢、页面渲染耗时长导致的定位失败问题。

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