React Router 6实现跳转至/aboutus页面并滚动到指定组件的问题

核心问题梳理 #

1. 路由路径大小写不匹配：路由配置为/aboutUs，但Link使用/aboutus，导致路由匹配异常
2. 滚动时机错误：直接在Link的onClick中获取目标元素时，目标页面尚未加载，无法找到元素
3. 移动端特殊场景：目标元素依赖展开收起状态，元素存在性不稳定，导致滚动失效或偏移

解决方案步骤 #

1. 修正路由路径匹配 #

首先统一Link和路由配置的路径大小写，确保路由能正确匹配：

<Link
  className="descriptionTextMobile"
  id="hoverLink"
  style={{ fontSize: "16px" }}
  to="/aboutUs#najmedin"
>
  Read more about our coach here{" "}
</Link>

2. 在目标页面处理滚动逻辑 #

在AboutUsScreen组件中，利用useLocation监听路由hash，确保页面加载完成且目标元素稳定后执行滚动：

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

function AboutUsScreen() {
  const location = useLocation();
  const [showFullDescriptionMartin, setShowFullDescriptionMartin] = useState(false);

  // 处理hash滚动逻辑
  useEffect(() => {
    if (location.hash === '#najmedin') {
      // 确保移动端目标元素（Martin的"Läs mer"按钮）处于可见状态
      if (showFullDescriptionMartin) {
        setShowFullDescriptionMartin(false);
      }

      // 等待DOM渲染完成后执行滚动，避免元素未加载
      const timer = setTimeout(() => {
        const targetElement = document.getElementById('najmedin');
        if (targetElement) {
          targetElement.scrollIntoView({ 
            behavior: 'smooth', 
            block: 'start' // 确保元素滚动到视口顶部，避免遮挡
          });
        }
      }, 100);

      return () => clearTimeout(timer);
    }
  }, [location.hash, showFullDescriptionMartin]);

  // 保留原有滚动重置逻辑
  useEffect(() => {
    if (!location.hash) {
      window.scrollTo(0, 0);
    }
  }, [location]);

  // 其余组件代码...
}

3. 解决移动端滚动干扰 #

针对移动端展开收起模块导致的滚动偏移问题，额外处理：

• 强制目标元素所在模块处于收起状态，确保元素位置稳定
• 使用block: 'start'参数固定滚动锚点，避免模块高度变化影响滚动位置
• 若延迟时间不足，可替换为requestAnimationFrame确保DOM更新完成：

useEffect(() => {
  if (location.hash === '#najmedin') {
    const handleScroll = () => {
      if (showFullDescriptionMartin) {
        setShowFullDescriptionMartin(false);
        requestAnimationFrame(handleScroll);
        return;
      }
      const targetElement = document.getElementById('najmedin');
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    };
    requestAnimationFrame(handleScroll);
  }
}, [location.hash, showFullDescriptionMartin]);

关键说明 #

• 不要在Link的onClick中直接处理滚动：跳转前目标页面的DOM尚未挂载，无法获取到目标元素
• 利用React Router原生的hash机制，结合页面内的状态控制，确保滚动时机和目标元素的稳定性
• 桌面端的NajDesktop组件和移动端的Martin"Läs mer"按钮共用najmedin id，可自动适配不同视图的滚动目标

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